d3-timelines
Version:
A d3 v4 version of timeline. Can display single bar timelines, timelines with icons, and timelines that pan.
82 lines (73 loc) • 2.17 kB
HTML
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="../dist/d3-timelines.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
.timeline-label {
font-family: sans-serif;
font-size: 12px;
}
.coloredDiv {
height:20px; width:20px; float:left;
}
</style>
<script type="text/javascript">
window.onload = function() {
var labelTestData = [
{label: "person a", times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
{label: "person b", times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
{label: "person c", times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
];
var width = 500;
// the stacked, hover, scrollable
function timelineHover() {
var chart = d3.timelines()
.width(width*4)
.stack()
.margin({left:70, right:30, top:0, bottom:0})
.hover(function (d, i, datum) {
// d is the current rendering object
// i is the index during d3 rendering
// datum is the id object
var div = $('#hoverRes');
var colors = chart.colors();
div.find('.coloredDiv').css('background-color', colors(i))
div.find('#name').text(datum.label);
})
.click(function (d, i, datum) {
alert(datum.label);
})
.scroll(function (x, scale) {
$("#scrolled_date").text(scale.invert(x) + " to " + scale.invert(x+width));
});
var svg = d3.select("#timeline3").append("svg").attr("width", width)
.datum(labelTestData).call(chart);
}
timelineHover();
}
</script>
</head>
<body>
<div>
<h3>A stacked timeline with hover, click, and scroll events</h3>
<div id="timeline3"></div>
<div id="hoverRes">
<div class="coloredDiv"></div>
<div id="name"></div>
<div id="scrolled_date"></div>
</div>
</div>
</body>
</html>