block by emeeks 280cb0607c68faf30bb5

d3.layout.timeline with dates

Full Screen

An example of d3.layout.timeline that shows wars the United States has been involved in during its first 100 years (from Wikipedia). Entries are formatted like:

name,start,end,sphere
"Second Sumatran expedition","01-01-1838","12-31-1838","Colonial"
"Mexican–American War","01-01-1846","12-31-1848","Latin America"
"Cayuse War","01-01-1847","12-31-1855","Native"
"Taiping Rebellion","01-01-1850","12-31-1864","Colonial"
"Apache Wars","01-01-1851","12-31-1900","Native"

By default, d3.layout.timeline expects dates and start and end as the notation for the location of the start and end data, so you can see there aren’t many settings for the layout.

index.html

d3.layout.timeline.js

wars.csv