Skip to content

Instantly share code, notes, and snippets.

@zbryikt

zbryikt/index.html

Created May 9, 2014 15:45
Show Gist options
  • Save zbryikt/75e58a04b0feed8f6622 to your computer and use it in GitHub Desktop.
Save zbryikt/75e58a04b0feed8f6622 to your computer and use it in GitHub Desktop.
Download ZIP
bar transition demo
Raw
index.html
<html>
<head>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg id="svg" width="100%" height="100%" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid">
</svg>
<script type="text/javascript">
var svg = d3.select("svg");
var data = [100,300,200];
var maxH = 600;
var margin = 100;
svg.selectAll("rect").data(data).enter().append("rect");
v = svg.selectAll("rect");
attr = {
x: function(d,i) { return i * 20 + 20; },
y: maxH + margin,
width: 15,
height: function(it) { return it;},
fill: "#000",
transform: function(it) { return "translate(0 -"+it+")"; }
};
v.attr(attr);
setTimeout(function() {
data = [300,200,100];
v.data(data);
v.transition().duration(1000).attr(attr)
}, 1000)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment