experimental checkbox legend

hrbrmstr · Feb 15, 2015 · ac72732 · ac72732
1 parent 662a16a
commit ac72732
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 36 deletions.
diff --git a/R/streamgraph.R b/R/streamgraph.R
@@ -23,6 +23,9 @@
 #'        \code{linear}, \code{step}, \code{step-before}, \code{step-after}, \code{basis}, \code{basis-open},
 #'        \code{cardinal-open}, \code{monotone}
 #' @param interactive set to \code{FALSE} if you do not want an interactive streamgraph
+#' @param legend if this is \code{TRUE} and \code{interactive} is \code{TRUE} then a popup menu
+#'        will be available that lists ll the keys in the data set. Selecting a key will
+#'        perform the same action as hovering over the area with the mouse.
 #' @param top top margin (default should be fine, this allows for fine-tuning plot space)
 #' @param right right margin (default should be fine, this allows for fine-tuning plot space)
 #' @param bottom bottom margin (default should be fine, this allows for fine-tuning plot space)
@@ -52,6 +55,7 @@ streamgraph <- function(data,
                         offset="silhouette",
                         interpolate="cardinal",
                         interactive=TRUE,
+                        legend=FALSE,
                         top=20,
                         right=40,
                         bottom=30,
@@ -116,7 +120,8 @@ streamgraph <- function(data,
     top=top,
     right=right,
     bottom=bottom,
-    left=left
+    left=left,
+    legend=legend
   )
 
   htmlwidgets::createWidget(

diff --git a/inst/htmlwidgets/streamgraph.js b/inst/htmlwidgets/streamgraph.js
@@ -31,10 +31,13 @@ HTMLWidgets.widget({
       d.value = +d.value;
     });
 
+   dbg = data ;
+
     // assign colors
 
     var colorrange = [];
     var tooltip ;
+    var opacity = 0.33 ;
 
     var ncols = d3.map(data, function(d) { return(d.key) }).keys().length;
     if (ncols > 9) ncols = 9
@@ -51,7 +54,7 @@ HTMLWidgets.widget({
 
     var x = d3.time.scale().range([0, width]);
     var y = d3.scale.linear().range([height-10, 0]);
-    var z = d3.scale.ordinal().range(colorrange);
+    var z = d3.scale.ordinal().range(colorrange).domain(d3.set(data.map(function(d) { return(d.key) })).values());
     var bisectDate = d3.bisector(function(d) { return d.date; }).left;
 
     var xAxis = d3.svg.axis().scale(x)
@@ -60,8 +63,6 @@ HTMLWidgets.widget({
       .tickFormat(d3.time.format(params.x_tick_format))
       .tickPadding(8);
 
-   dbg = xAxis ;
-
     var yAxis = d3.svg.axis().scale(y)
       .ticks(params.y_tick_count)
       .tickFormat(d3.format(params.y_tick_format))
@@ -102,7 +103,7 @@ HTMLWidgets.widget({
     .enter().append("path")
     .attr("class", "layer")
     .attr("d", function(d) { return area(d.values); })
-    .style("fill", function(d, i) { return z(i); });
+    .style("fill", function(d, i) { return z(d.key); });
 
     // TODO legends in general but by defalt if not interactive
     // TODO add tracker vertical line
@@ -119,7 +120,7 @@ HTMLWidgets.widget({
         svg.selectAll(".layer").transition()
         .duration(150)
         .attr("opacity", function(d, j) {
-          return j != i ? 0.6 : 1;
+          return j != i ? opacity : 1;
         })})
 
       .on("mousemove", function(dd, i) {
@@ -163,9 +164,6 @@ HTMLWidgets.widget({
       })
     }
 
-//  stroke: #ffffff;
-//  stroke-width: 2px;
-
     svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
@@ -175,33 +173,63 @@ HTMLWidgets.widget({
     .attr("class", "y axis")
     .call(yAxis);
 
-  },
+    function onselchange() {
+
+      var selected_value = d3.event.target.value;
+
+      tooltip.text("")
+
+      if (selected_value == "——— Select ———") {
+
+        d3.selectAll("#" + el.id + " .layer")
+        .transition()
+        .duration(250)
+        .attr("opacity", "1")
+        .classed("hover", false)
+        .attr("stroke-width", "0px")
+
+      } else {
+
+        d3.selectAll("#" + el.id + " .layer")
+          .classed("hover", function(d) {
+            return d.key != selected_value ? false : true;
+          })
+          .transition()
+          .duration(150)
+          .attr("opacity", function(d) {
+            return d.key != selected_value ? opacity : 1;
+          })
+          .attr("stroke", strokecolor)
+          .attr("stroke-width", function(d) {
+            return d.key != selected_value ? "0px" : "0.5px";
+          })
+      }
+
+    };
+
+    if (params.legend && params.interactive) {
+
+      var select = d3.select("#" + el.id)
+          .append('select')
+          .attr('class','select')
+          .on('change', onselchange)
+
+      var selopts = d3.set(data.map(function(d) { return(d.key) })).values()
+      selopts.unshift("——— Select ———")
+
+      var options = select
+         .selectAll('option')
+         .data(selopts).enter()
+         .append('option')
+           .text(function (d) { return d; })
+           .attr("value", function (d) { return d; })
+      }
+
+    },
 
   resize: function(el, width, height, instance) {
     if (instance.params)
       this.drawGraphic(el, instance.params, width, height);
     }
 
 });
-
-function drawLegend (varNames) {
-    var legend = svg.selectAll(".legend")
-        .data(varNames.slice().reverse())
-      .enter().append("g")
-        .attr("class", "legend")
-        .attr("transform", function (d, i) { return "translate(55," + i * 20 + ")"; });
-
-    legend.append("rect")
-        .attr("x", width - 10)
-        .attr("width", 10)
-        .attr("height", 10)
-        .style("fill", color)
-        .style("stroke", "grey");
-
-    legend.append("text")
-        .attr("x", width - 12)
-        .attr("y", 6)
-        .attr("dy", ".35em")
-        .style("text-anchor", "end")
-        .text(function (d) { return d; });
-}
diff --git a/man/streamgraph.Rd b/man/streamgraph.Rd
@@ -6,8 +6,8 @@
 \usage{
 streamgraph(data, key = "key", value = "value", date = "date",
   width = NULL, height = NULL, offset = "silhouette",
-  interpolate = "cardinal", interactive = TRUE, top = 20, right = 40,
-  bottom = 30, left = 50)
+  interpolate = "cardinal", interactive = TRUE, legend = FALSE,
+  top = 20, right = 40, bottom = 30, left = 50)
 }
 \arguments{
 \item{data}{data frame}
@@ -33,6 +33,10 @@ The default is probably fine fore most uses, but can be one of \code{cardinal} (
 
 \item{interactive}{set to \code{FALSE} if you do not want an interactive streamgraph}
 
+\item{legend}{if this is \code{TRUE} and \code{interactive} is \code{TRUE} then a popup menu
+will be available that lists ll the keys in the data set. Selecting a key will
+perform the same action as hovering over the area with the mouse.}
+
 \item{top}{top margin (default should be fine, this allows for fine-tuning plot space)}
 
 \item{right}{right margin (default should be fine, this allows for fine-tuning plot space)}

diff --git a/tests/testthat/ccasn.R b/tests/testthat/ccasn.R
@@ -0,0 +1,43 @@
+library("streamgraph")
+library(pbapply)
+library(dplyr)
+
+logs <- list.files("/Users/bob/Development/tiq-test-Winter2015/data/enriched/public_inbound/", full.names=TRUE)
+
+dat <- pblapply(logs, function(x) {
+  dat <- read.csv(x)
+})
+
+dat2 <- bind_rows(dat)
+
+# country view ------------------------------------------------------------
+
+dat2 %>%
+  group_by(date, country) %>%
+  tally() %>%
+  top_n(5, n) -> ccs
+
+streamgraph(ccs, "country", "n") %>%
+  sg_axis_x(tick_interval=1, tick_units="weeks", tick_format="%m-%d")
+
+# asn view ----------------------------------------------------------------
+
+dat2 %>%
+  group_by(date, asnumber) %>%
+  tally() %>%
+  top_n(5, n) %>%
+  mutate(asnumber=sprintf("AS%d", asnumber)) -> asns
+
+streamgraph(asns, "asnumber", "n") %>%
+  sg_axis_x(tick_interval=1, tick_units="weeks", tick_format="%m-%d")
+
+# ips ---------------------------------------------------------------------
+
+dat2 %>%
+  group_by(date, entity) %>%
+  tally() %>%
+  top_n(5, n) -> ips
+
+streamgraph(ips, "entity", "n") %>%
+  sg_axis_x(tick_interval=1, tick_units="weeks", tick_format="%m-%d")
+
diff --git a/tests/testthat/sg.R b/tests/testthat/sg.R
@@ -16,12 +16,20 @@ ggplot2::movies %>%
   tally(wt=value) %>%
   ungroup -> dat
 
-streamgraph(dat, "genre", "n", "year", interactive=TRUE) %>%
+streamgraph(dat, "genre", "n", "year", interactive=TRUE, legend=TRUE) %>%
   sg_axis_x(20, "year", "%Y") %>%
   sg_colors("Spectral")
 
 str(ggplot2::movies)
 
+dat <- read.csv("http://bl.ocks.org/mbostock/raw/1134768/crimea.csv")
+dat %>%
+  mutate(date=as.Date(sprintf("01/%s", dat$date), format="%d/%m/%Y")) %>%
+  tidyr::gather(deaths, count, -date) -> dat
+
+streamgraph(dat, "deaths", "count", offset="zero") %>%
+  sg_axis_x(tick_interval = 3, tick_format = "%b %y")
+
 
 ggplot2::movies %>%
   select(year, Action, Animation, Comedy, Drama, Documentary, Romance, Short) %>%
@@ -51,7 +59,7 @@ babynames %>%
   filter(sex=="F",
          name %in% dat1$name) -> dat
 
-streamgraph(dat, "name", "n", "year") %>%
+streamgraph(dat, "name", "n", "year", legend=TRUE) %>%
   sg_colors("Spectral") %>%
   sg_axis_x(tick_units = "year", tick_interval = 10, tick_format = "%Y")