Learn R Programming

timelineR (version 0.0.2)

timeline: Interactive Timeline Plots

Description

Easily create interactive d3.js timelines using the d3.layout.timeline layout from Elijah Meeks. Since we leverage the infrastructure of htmlwidgets, these interactive timelines should work seamlessly in all R contexts, including the console, RStudio, rmarkdown, and Shiny.

Usage

timeline(data = NULL, dateFormat = NULL, bandStart = NULL, bandEnd = NULL, extent = NULL, padding = NULL, maxBandHeight = NULL, children = NULL, colorScale = NULL, color = NULL, width = NULL, height = NULL)

Arguments

data
data.frame of data to be plotted
dateFormat
function that returns the values for the start and end of the bands. Defaults to function (d) return new Date(d). The timeline layout can plot floats and ints for relative time (see the simple example that uses integer positions for start and end points).
bandStart
function that returns the start of the band. Remember that it will also be passed through timeline.dateFormat. Defaults to function (d) return d.start.
bandEnd
function that returns the start of the band. Remember that it will also be passed through timeline.dateFormat. Defaults to function (d) return d.end. If you want to use duration-based notation, you might try something like function (d) return d.start + d.duration.
extent
extent of the timeline. By default, the extent is set to the minimum start and maximum end, but if you have a range you'd rather set the timeline to, you can do so. This is also passed through #timeline.dateFormat.
padding
distance in pixels between lanes. Defaults to 0.
maxBandHeight
maximum band height. Defaults to Infinity (bands will fill the given height in the timeline.size array minus any necessary padding).
children
children accessor, for use with hierarchical timeline data. Typically children are stored in an array in .children or .values. Set to return null or false to disable hierarchical support. Hierarchical data can be a hierarchical JSON object (like the ubiquitous flare.json dataset) or an array of objects with each having child elements.
colorScale
function to color the timeline bands
color
name of key/variable to color by. See colorScale
width, height
a valid CSS unit for the width and height of the htmlwidget container

Examples

Run this code
library(timelineR)

# simple example provided by d3.layout.timeline
#   author Elijah Meeks
#   http://bl.ocks.org/emeeks/d24171dac80dd535521b
timeline(
  read.csv("http://bl.ocks.org/emeeks/raw/d24171dac80dd535521b/int_bands.csv"),
  bandStart = htmlwidgets::JS("function (d) {return d.s}"),
  bandEnd = htmlwidgets::JS("function (d) {return d.e}"),
  dateFormat = htmlwidgets::JS("function (d) {return parseInt(d)}")
)


# example with dates provided by d3.layout.timeline author
#  Elijah Meeks
#  http://bl.ocks.org/emeeks/280cb0607c68faf30bb5

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"
)

# same as above except use d3 built-in color scale
timeline(
  read.csv("http://bl.ocks.org/emeeks/raw/280cb0607c68faf30bb5/wars.csv"),
  colorScale = htmlwidgets::JS('d3.scale.category10()'),
  color = "sphere"
)

## Not run: 
#   # quick chart with Alabama crop planting and harvesting dates
#   # http://www.nass.usda.gov/Publications/Usual_Planting_and_Harvesting_Dates/uph97.pdf
#   
#   crop_al <- data.frame(
#     crop = c(
#       "Corn, for Grain",
#       "Cotton",
#       #"Hay, Other",
#       "Peanuts",
#       "Sorghum, for Grain",
#       "Sorghum, for Silage",
#       "Soybeans",
#       "Wheat, Winter"
#     ),
#     begin = paste0(
#       c(
#         "March 5",
#         "April 12",
#         #"",
#         "April 16",
#         "April 1",
#         "April 1",
#         "April 30",
#         "October 2"
#       ),
#       ",2015"
#     ),
#     end = c(
#       "November 2, 2015",
#       "December 15, 2015",
#       #"October 15",
#       "November 1, 2015",
#       "December 15, 2015",
#       "December 15, 2015",
#       "December 8, 2015",
#       "July 1, 2016"
#     ),
#     stringsAsFactors = FALSE
#   )
#   
#   crop_al %>>%
#     timeline(
#       bandStart = htmlwidgets::JS('function(d){return new Date(d.begin)}'),
#       bandEnd = htmlwidgets::JS('function(d){return new Date(d.end)}'),
#       colorScale = htmlwidgets::JS('d3.scale.category20()'),
#       color = "crop"
#     ) %>>%
#     add_axis(
#       tickFormat = htmlwidgets::JS(
#         'd3.time.format("%b")'
#       )
#     )
#   
# ## End(Not run)

Run the code above in your browser using DataLab