Quick Introduction to timelineR-蒲公英云

Quick Introduction to timelineR

Kenton Russell

2015-10-02

timelineR lets us use the new d3.layout.timeline from Elijah Meeks to make interactive d3.js swimlane timelines. If you prefer the more traditional graphics orggplot2 from R, we can also leverage d3.layout.timeline using V8 to produce static plots.

Installation

devtools::install_github("timelyportfolio/timelineR")

Examples

I very much appreciate when authors of R packages and JavaScript libraries provide helpful examples to demonstrate their fine work and provide a foundation for its use. This is definitely the case with Elijah Meeks and d3.layout.timeline. Let’s start our exploration of timelineR by recreating Examples With Dates.

Starting Point

library(timelineR)
# example with dates provided by d3.layout.timeline author
# Elijah Meeks
# http://bl.ocks.org/emeeks/280cb0607c68faf30bb5
t1 <- timeline(
  read.csv("http://bl.ocks.org/emeeks/raw/280cb0607c68faf30bb5/wars.csv"),
  colorScale = htmlwidgets::JS(
'd3.scale.ordinal()
 .domain(["European","Native","Colonial","Latin America","Internal"])
 .range(["#96abb1", "#313746", "#b0909d", "#687a97", "#292014"])
'    
  ),
  color = "sphere",
  height = "400",
  width = "80%"
)
t1

Add an Axis

add_axis(t1)

1780179018001810182018301840185018601870188018901900

Customize and Style

# use this example as inspiration
# http://jasonheppler.org/projects/war/
library(pipeR)
t1 %>>%
 add_axis(tickSize = 400) %>>%
 add_tasks(
    htmlwidgets::JS(
'
function(){ 
 var svg = d3.select(this.el).select("svg");
 svg.selectAll(".timeline-axis > path")
 .style("fill","none")
 .style("stroke","none");
 svg.selectAll(".timeline-axis .tick line")
 .style("stroke","gray")
 .attr("stroke-dasharray","5 5");
 svg.selectAll("rect")
 .style("stroke","white")
 .attr("rx",4);
}
'
    )
  )

1780179018001810182018301840185018601870188018901900

Static Plots with ggplot2

In a feat of super-isomorphism, let’s use d3.layout.timeline to calculate the layout and coordinates for a ggplot2 chart.

library(ggplot2)
library(V8)
ctx <- new_context()
# get d3
ctx$source(system.file("htmlwidgets/lib/d3/d3.min.js",package="timelineR"))
## [1] "true"
# get d3.layout.timeline
ctx$source(system.file("htmlwidgets/lib/d3.layout.timeline/d3.layout.timeline.js",package="timelineR"))
# assign the simple example data to data
ctx$assign("data", read.csv("http://bl.ocks.org/emeeks/raw/d24171dac80dd535521b/int_bands.csv"))
# do the layout and get it in R
invisible(ctx$eval(
'
var timeline = d3.layout.timeline()
 .size([1000,300])
 .bandStart(function (d) {return d.s})
 .bandEnd(function (d) {return d.e})
 .dateFormat(function (d) {return parseInt(d)})
timelineBands = timeline(data);
'
))
# see if it worked
time_bands <- ctx$get("timelineBands")
library(ggplot2)
ggplot(
  time_bands,
  aes(
    xmin = start,
    ymin = y,
    xmax = end,
    ymax = y + dy
  )
) + ylim(300,0) + geom_rect(fill = "#687a97", colour = "white")

![Image 1][]

Thanks

Elijah Meeks

Elijah has made significant contribiutions to the d3.js community. I highly recommend his book D3.js in Action.

Mike Bostock

Mike Bostock has provided us an unbelievable platform to do amazing things withd3.js.

Ramnath Vaidyanathan and RStudio

Ramnath Vaidyanathan and the very skilled, generous folks at RStudio have made it easy with htmlwidgets to seamlessly integrate interactive JavaScript/HTML/CSS in R.

[Image 1]: