Skip to content

Instantly share code, notes, and snippets.

@ryosuzuki

ryosuzuki/d3-timelapse.html

Last active August 29, 2015 14:18
Show Gist options
  • Save ryosuzuki/8766309ac2fcd31780c0 to your computer and use it in GitHub Desktop.
Save ryosuzuki/8766309ac2fcd31780c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3-timelapse.html
<html class="ocks-org do-not-copy"><head><meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script><style type="text/css"></style>
<body>
<script>(function() {
var n = 243;
var duration = 750;
var now = new Date(Date.now() - duration);
var count = 0;
var data = d3.range(n).map(function() { return 0; });
var margin = {top: 6, right: 0, bottom: 20, left: 40},
width = 960 - margin.right,
height = 120 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([now - (n - 2) * duration, now - duration])
.range([0, width]);
var svg = d3.select("body").append("p").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
var transition = d3.select({}).transition()
.duration(750)
.ease("linear");
(function tick() {
transition = transition.each(function() {
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
// slide the x-axis left
axis.call(x.axis);
}).transition().each("start", tick);
})();
})()</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment