An example of d3.layout.timeline that shows wars the United States has been involved in during its first 100 years (from Wikipedia). Events have been categorized and rendered in separate lanes for colonial wars, native wars, internal wars, wars involving European powers, and wars in Latin America.
forked from emeeks's block: d3.layout.timeline categorized timelines
xxxxxxxxxx
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Categorized Timeline Using Dates</title>
<meta charset="utf-8" />
<style type="text/css">
svg {
height: 1100px;
width: 1100px;
}
div.viz {
height: 1000px;
width: 1000px;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="d3.layout.timeline.js" charset="utf-8" type="text/javascript"></script>
<script>
types = ["European","Native","Colonial","Latin America","Internal", "another"];
colorScale = d3.scale.ordinal()
.domain(types)
.range(["#9895b0", "#313746", "#b0909d", "#687a97", "#292014"]);
d3.csv("wars.csv", function (csv) {
var timeline = d3.layout.timeline()
.size([500,36])
.extent(["7/4/1776", "12/31/1876"])
.padding(3)
.maxBandHeight(20);
types.forEach(function (type, i) {
onlyThisType = csv.filter(function(d) {return d.sphere === type});
theseBands = timeline(onlyThisType);
d3.select("svg").append("g")
.attr("transform", "translate(100," + (35 + (i * 50)) + ")")
.selectAll("rect")
.data(theseBands)
.enter()
.append("rect")
.attr("rx", 2)
.attr("x", function (d) {return d.start})
.attr("y", function (d) {return d.y})
.attr("height", function (d) {return d.dy})
.attr("width", function (d) {return d.end - d.start})
.style("fill", function (d) {return colorScale(d.sphere)})
.style("stroke", "black")
.style("stroke-width", 1);
d3.select("svg").append("text")
.text(type)
.attr("y", 50 + (i * 50))
.attr("x", 20)
})
})
</script>
<body>
<div id="viz">
<svg style="background:white;" height=1100 width=1100>
</svg>
</div>
<footer>
</footer>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js