Skip to content

Instantly share code, notes, and snippets.

@tgk

tgk/index.html

Created September 19, 2013 12:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tgk/6622979 to your computer and use it in GitHub Desktop.
Save tgk/6622979 to your computer and use it in GitHub Desktop.
Download ZIP
Animating date axis
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var width = 960,
height = 300;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var x = d3.time.scale()
.domain([new Date(0), new Date()])
.range([30, width - 30]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0,80)");
var update = function(data) {
x = d3.time.scale()
.domain([data[0], data[1]])
.range([30, width - 30]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
svg.selectAll("g.x.axis")
.transition()
.duration(1000)
.call(xAxis);
};
var dataA = [new Date("2012-04-21"), new Date("2013-12-01")];
var dataB = [new Date("2012-07-21"), new Date("2013-04-01")];
var a = function() {
update(dataA);
setTimeout(b, 2000);
};
var b = function() {
update(dataB);
setTimeout(a, 2000);
};
a();
d3.select(self.frameElement).style("height", height + "px");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment