Skip to content

Instantly share code, notes, and snippets.

@aogriffiths

aogriffiths/README

Last active December 14, 2015 22:38
Show Gist options
  • Save aogriffiths/5159301 to your computer and use it in GitHub Desktop.
Save aogriffiths/5159301 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README
Demonstrates some simple d3 transitions
see it more clearly at http://bl.ocks.org/5159301
Raw
index.html
<html lang="en">
<head>
<title>D3 Transitions</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- JS -->
<!--
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
-->
<script type="text/javascript" src="../2902093/d3.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
main();
</script>
</body>
</html>
Raw
main.js
function main() {
var svg = d3.select("#vis").append("svg")
.attr("width", 800)
.attr("height", 600);
var data =
[
{'vert':1, 'size':2,'name':'One', 'colour':'red'},
{'vert':2, 'size':5,'name':'Two', 'colour':'green'},
{'vert':3, 'size':3,'name':'Three', 'colour':'orange'}
];
var data2 =
[
{'vert':1, 'size':6,'name':'One', 'colour':'red'},
{'vert':2, 'size':2,'name':'Two', 'colour':'green'},
{'vert':3, 'size':5,'name':'Three', 'colour':'orange'}
];
var topg = svg.append("g")
.attr("transform", "rotate(270)translate(-120,0)");
var g = topg.selectAll("g.item")
.data(data);
g.enter()
.append("g")
.attr("class", 'item');
g
.attr("transform", function(d){
return "translate(" + 0 + "," + d.vert * 25 +")";
});
var size = function(d){return d.size * 20;};
var t1 = 2000;
var t2 = 4000;
var r1 = g.select("rect.r1");
if(r1.empty()) r1 = g
.append("rect")
.attr("class", 'r1');
r1
.attr("fill", function(d){return d.colour})
.attr("height", 20)
.attr("width", size);
g.append("text")
.attr("dy", 15)
.attr("dx", 5)
.text(function(d){return d.name});
var g = topg.selectAll("g.item")
.data(data2);
var r1 = g.select("rect.r1")
.transition()
.duration(5000)
.attr("width", size);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment