Skip to content

Instantly share code, notes, and snippets.

@alexbfree

alexbfree/timelineStackedWithScrollProblem.html

Created January 8, 2019 17:33
Show Gist options
  • Save alexbfree/a363160784517b804e4e22effeb3f550 to your computer and use it in GitHub Desktop.
Save alexbfree/a363160784517b804e4e22effeb3f550 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
timelineStackedWithScrollProblem.html
<!doctype 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;
}
#timeline2 .axis {
transform: translate(0px,40px);
-ms-transform: translate(0px,40px); /* IE 9 */
-webkit-transform: translate(0px,40px); /* Safari and Chrome */
-o-transform: translate(0px,40px); /* Opera */
-moz-transform: translate(0px,40px); /* Firefox */
}
.coloredDiv {
height:20px; width:20px; float:left;
}
</style>
<script type="text/javascript">
window.onload = function() {
var labelTestData = [
{label: "step1", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step2", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step3", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step4", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step5", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step6", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step7", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step8", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step9", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step10", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step11", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step12", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step13", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step14", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step15", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step16", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step17", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step18", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step19", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step20", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step21", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step22", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step23", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step24", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step25", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step26", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step27", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step28", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step29", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step30", times: [{"starting_time": 100, "ending_time": 175}]},
{label: "step31", times: [{"starting_time": 0, "ending_time": 135}]},
{label: "step32", times: [{"starting_time": 120, "ending_time": 10600}, ]},
{label: "step33", times: [{"starting_time": 100, "ending_time": 175}]}
];
var width = 1000;
var chart = d3.timelines()
.relativeTime()
.tickFormat({
format: function(d) { return d3.timeFormat("%M")(d) },
tickTime: d3.timeMinutes,
tickInterval: 15,
tickSize: 15,
})
.stack()
.margin({left:70, right:30, top:0, bottom:0});
chart.height = 300;
chart.width = 1000;
chart.ending(2000);
var svg = d3.select("#timeline3").append("svg").attr("width", width)
.datum(labelTestData).call(chart);
}
</script>
</head>
<body>
<div>
<h3>A stacked timeline with hover, click, and scroll events</h3>
<div id="timeline3" style="margin-left:100px;margin-top:50px;"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment