Version 0.4 released

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

Hide file tree

Showing 14 changed files with 227 additions and 68 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,8 +1,8 @@
 Package: streamgraph
 Type: Package
 Title: streamgraph is an htmlwidget for building streamgraph visualizations
-Version: 0.3.1
-Date: 2015-02-14
+Version: 0.4
+Date: 2015-02-15
 Author: Bob Rudis (@hrbrmstr)
 Maintainer: Bob Rudis <bob@rudis.net>
 Description: A streamgraph (or "stream graph") is a type of stacked area graph

diff --git a/NAMESPACE b/NAMESPACE
@@ -1,10 +1,13 @@
 # Generated by roxygen2 (4.1.0): do not edit by hand
 
 export("%>%")
+export(renderStreamgraph)
 export(sg_axis_x)
 export(sg_axis_y)
 export(sg_colors)
+export(sg_legend)
 export(streamgraph)
+export(streamgraphOutput)
 import(htmltools)
 import(htmlwidgets)
 import(xts)

diff --git a/R/streamgraph.R b/R/streamgraph.R
@@ -23,9 +23,6 @@
 #'        \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)
@@ -55,7 +52,6 @@ streamgraph <- function(data,
                         offset="silhouette",
                         interpolate="cardinal",
                         interactive=TRUE,
-                        legend=FALSE,
                         top=20,
                         right=40,
                         bottom=30,
@@ -121,7 +117,8 @@ streamgraph <- function(data,
     right=right,
     bottom=bottom,
     left=left,
-    legend=legend
+    legend=FALSE,
+    legend_label=""
   )
 
   htmlwidgets::createWidget(
@@ -237,4 +234,63 @@ sg_colors <- function(sg, palette="Spectral") {
 
   sg
 
+}
+
+#' Modify streamgraph legend properties
+#'
+#' If the \code{streamgraph} is interactive, a "legend" can be added
+#' that displays a select menu of all the stream categories. Selecting
+#' a category will highlight that stream in the graph.
+#'
+#' TODO: legends for non-interactive streamgraphs
+#'
+#' @param show 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 label label for the legend (optional)
+#' @export
+#' @examples \dontrun{
+#' library(dplyr)
+#' library(streamgraph)
+#' ggplot2::movies %>%
+#' select(year, Action, Animation, Comedy, Drama, Documentary, Romance, Short) %>%
+#'   tidyr::gather(genre, value, -year) %>%
+#'   group_by(year, genre) %>%
+#'   tally(wt=value) %>%
+#'   ungroup %>%
+#'   mutate(year=as.Date(sprintf("%d-01-01", year))) -> dat
+#'
+#' streamgraph(dat, "genre", "n", "year") %>%
+#'   sg_colors("PuOr") %>%
+#'   sg_legend(TRUE, "Genre: ")
+#' }
+sg_legend <- function(sg, show=FALSE, label="") {
+
+  sg$x$legend <- show
+  sg$x$legend_label <- label
+
+  sg
+
+}
+
+#' Widget output function for use in Shiny
+#'
+#' @export
+streamgraphOutput <- function(outputId, width = '100%', height = '400px'){
+  shinyWidgetOutput(outputId, 'streamgraph', width, height, package = 'streamgraph')
+}
+
+
+#' Widget render function for use in Shiny
+#'
+#' @export
+renderStreamgraph <- function(expr, env = parent.frame(), quoted = FALSE) {
+  if (!quoted) { expr <- substitute(expr) } # force quoted
+  shinyRenderWidget(expr, streamgraphOutput, env, quoted = TRUE)
+}
+
+streamgraph_html <- function(id, style, class, ...) {
+  list(tags$div(id = id, class = class, style = style),
+       tags$div(id = sprintf("%s-legend", id), class = sprintf("%s-legend", class),
+                HTML(sprintf("<center><label for='%s-select'></label><select id='%s-select' style='visibility:hidden;'></select></center>", id, id))))
 }
diff --git a/README.Rmd b/README.Rmd
@@ -1,15 +1,15 @@
 ---
 title: "README"
 author: "Bob Rudis"
-date: February 14, 2015
+date: February 15, 2015
 output:
   md_document:
     variant: markdown_github
 ---
 
 streamgraph is an htmlwidget for making streamgraphs. Planned support for `xts` objects.
 
-[Sample Rmd](http://rpubs.com/hrbrmstr/streamgraph_03)
+[Sample Rmd](http://rpubs.com/hrbrmstr/streamgraph04)
 
 A streamgraph (or "stream graph") is a type of stacked area graph 
 which is displaced around a central axis, resulting in a flowing, 
@@ -23,6 +23,7 @@ The following functions are implemented:
 - `sg_axis_x`	: Modify streamgraph x axis formatting
 - `sg_axis_y`	: Modify streamgraph y axis formatting
 - `sg_colors`	: Modify streamgraph colors
+- `sg_legend` : Add select menu "legend" to interactive streamgraphs
 
 ### News
 
@@ -32,6 +33,7 @@ The following functions are implemented:
 - Version `0.2.2` relased - rly rly rly fixed tooltips now, also assed ability to format y axis text
 - Version `0.3` released - folks can have some fun with new `offset` and `interpolate` parameters to `streamgraph`
 - Version `0.3.1` released - bug fix to fix error with `d3.stack`; `streamgraph` will now see if the date input is a year and automatically convert it to the necessary format (no need to use `as.Date`)
+- Version `0.4` released - select menu "legend" (interactive only)
 
 ### Installation
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 streamgraph is an htmlwidget for making streamgraphs. Planned support for `xts` objects.
 
-[Sample Rmd](http://rpubs.com/hrbrmstr/streamgraph_03)
+[Sample Rmd](http://rpubs.com/hrbrmstr/streamgraph04)
 
 A streamgraph (or "stream graph") is a type of stacked area graph which is displaced around a central axis, resulting in a flowing, organic shape. Streamgraphs were developed by Lee Byron and popularized by their use in a February 2008 New York Times article on movie box office revenues. ([Wikipedia](http://en.wikipedia.org/wiki/Streamgraph))
 
@@ -10,6 +10,7 @@ The following functions are implemented:
 -   `sg_axis_x` : Modify streamgraph x axis formatting
 -   `sg_axis_y` : Modify streamgraph y axis formatting
 -   `sg_colors` : Modify streamgraph colors
+-   `sg_legend` : Add select meny "legend" to interactive streamgraphs
 
 ### News
 
@@ -64,7 +65,7 @@ library(testthat)
 date()
 ```
 
-    ## [1] "Sat Feb 14 11:12:27 2015"
+    ## [1] "Sun Feb 15 08:05:19 2015"
 
 ``` r
 test_dir("tests/")

diff --git a/inst/htmlwidgets/lib/streamgraph/streamgraph.css b/inst/htmlwidgets/lib/streamgraph/streamgraph.css
@@ -9,6 +9,6 @@ svg text {
   font: 10px "Gill Sans", "Helvetica", "sans-serif";
 }
 
-p {
+p, select, option, label {
   font: 12px "Gill Sans", "Helvetica", "sans-serif";
 }
diff --git a/inst/htmlwidgets/streamgraph.js b/inst/htmlwidgets/streamgraph.js
@@ -1,5 +1,3 @@
-var dbg ;
-
 HTMLWidgets.widget({
 
   name: 'streamgraph',
@@ -31,8 +29,6 @@ HTMLWidgets.widget({
       d.value = +d.value;
     });
 
-   dbg = data ;
-
     // assign colors
 
     var colorrange = [];
@@ -54,7 +50,8 @@ 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).domain(d3.set(data.map(function(d) { return(d.key) })).values());
+    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)
@@ -105,7 +102,7 @@ HTMLWidgets.widget({
     .attr("d", function(d) { return area(d.values); })
     .style("fill", function(d, i) { return z(d.key); });
 
-    // TODO legends in general but by defalt if not interactive
+    // TODO legends for non-interactive
     // TODO add tracker vertical line
 
     if (params.interactive) {
@@ -125,6 +122,10 @@ HTMLWidgets.widget({
 
       .on("mousemove", function(dd, i) {
 
+        d3.select("#" + el.id + "-select")
+        .selectAll("option")
+        .attr("selected", function(d, i) { if (i==0) { return("selected") } })
+
         function iskey(key) {
           return(function(element) {
             return(element.key==key)
@@ -177,7 +178,7 @@ HTMLWidgets.widget({
 
       var selected_value = d3.event.target.value;
 
-      tooltip.text("")
+      tooltip.text("");
 
       if (selected_value == "——— Select ———") {
 
@@ -209,15 +210,19 @@ HTMLWidgets.widget({
 
     if (params.legend && params.interactive) {
 
-      var select = d3.select("#" + el.id)
-          .append('select')
-          .attr('class','select')
+      if (params.legend_label != "") {
+        d3.select("#" + el.id + "-legend label")
+          .text(params.legend_label)
+      }
+
+      var select = d3.select("#" + el.id + "-select")
+          .style("visibility", "visible")
           .on('change', onselchange)
 
       var selopts = d3.set(data.map(function(d) { return(d.key) })).values()
       selopts.unshift("——— Select ———")
 
-      var options = select
+      var options = d3.select("#" + el.id + "-select")
          .selectAll('option')
          .data(selopts).enter()
          .append('option')

diff --git a/man/renderStreamgraph.Rd b/man/renderStreamgraph.Rd
@@ -0,0 +1,12 @@
+% Generated by roxygen2 (4.1.0): do not edit by hand
+% Please edit documentation in R/streamgraph.R
+\name{renderStreamgraph}
+\alias{renderStreamgraph}
+\title{Widget render function for use in Shiny}
+\usage{
+renderStreamgraph(expr, env = parent.frame(), quoted = FALSE)
+}
+\description{
+Widget render function for use in Shiny
+}
+
diff --git a/man/sg_legend.Rd b/man/sg_legend.Rd
@@ -0,0 +1,41 @@
+% Generated by roxygen2 (4.1.0): do not edit by hand
+% Please edit documentation in R/streamgraph.R
+\name{sg_legend}
+\alias{sg_legend}
+\title{Modify streamgraph legend properties}
+\usage{
+sg_legend(sg, show = FALSE, label = "")
+}
+\arguments{
+\item{show}{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{label}{label for the legend (optional)}
+}
+\description{
+If the \code{streamgraph} is interactive, a "legend" can be added
+that displays a select menu of all the stream categories. Selecting
+a category will highlight that stream in the graph.
+}
+\details{
+TODO: legends for non-interactive streamgraphs
+}
+\examples{
+\dontrun{
+library(dplyr)
+library(streamgraph)
+ggplot2::movies \%>\%
+select(year, Action, Animation, Comedy, Drama, Documentary, Romance, Short) \%>\%
+  tidyr::gather(genre, value, -year) \%>\%
+  group_by(year, genre) \%>\%
+  tally(wt=value) \%>\%
+  ungroup \%>\%
+  mutate(year=as.Date(sprintf("\%d-01-01", year))) -> dat
+
+streamgraph(dat, "genre", "n", "year") \%>\%
+  sg_colors("PuOr") \%>\%
+  sg_legend(TRUE, "Genre: ")
+}
+}
+
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, legend = FALSE,
-  top = 20, right = 40, bottom = 30, left = 50)
+  interpolate = "cardinal", interactive = TRUE, top = 20, right = 40,
+  bottom = 30, left = 50)
 }
 \arguments{
 \item{data}{data frame}
@@ -33,10 +33,6 @@ 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/man/streamgraphOutput.Rd b/man/streamgraphOutput.Rd
@@ -0,0 +1,12 @@
+% Generated by roxygen2 (4.1.0): do not edit by hand
+% Please edit documentation in R/streamgraph.R
+\name{streamgraphOutput}
+\alias{streamgraphOutput}
+\title{Widget output function for use in Shiny}
+\usage{
+streamgraphOutput(outputId, width = "100\%", height = "400px")
+}
+\description{
+Widget output function for use in Shiny
+}
+
diff --git a/streamgraph.Rmd b/streamgraph.Rmd
@@ -1,7 +1,7 @@
 ---
-title: "streamgraph 0.3.1"
+title: "streamgraph 0.4"
 author: '@hrbrmstr'
-date: "February 14, 2015"
+date: "February 15, 2015"
 output: html_document
 ---
 
@@ -56,7 +56,8 @@ dat %>%
 dat %>%
   streamgraph("asset_class", "volume_billions", "year", offset="zero", interpolate="cardinal") %>%
   sg_axis_x(1, "year", "%Y") %>%
-  sg_colors("PuOr")
+  sg_colors("PuOr") %>%
+  sg_legend(TRUE, "Asset class: ")
 ```
 
 Now, who let that stacked bar chart get in here `;-)`
@@ -82,5 +83,6 @@ babynames %>%
 
 streamgraph(dat, "name", "n", "year") %>%
   sg_colors("Spectral") %>%
-  sg_axis_x(tick_units = "year", tick_interval = 10, tick_format = "%Y")
+  sg_axis_x(tick_units = "year", tick_interval = 10, tick_format = "%Y") %>%
+  sg_legend(TRUE, "Name: ")
 ```
diff --git a/streamgraph.html b/streamgraph.html