Built with blockbuilder.org
forked from bletcher's block: transition test
Built with blockbuilder.org
forked from bletcher's block: transition test
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width:100%; height: 100% } | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see! | |
//Width and height | |
var w = 700; | |
var h = 480; | |
var svg = d3.select("body").append("svg") | |
svg.append("rect") | |
.attr({x: 0, y: 0, width: w, height: h}) | |
.style({ fill: "#a72d1a"}) | |
.transition().duration(3000).ease("bounce") | |
.style({ fill: "#5db9e3"}) | |
var dataset = [ | |
[ 5, 20 ], | |
[ 480, 90 ], | |
[ 250, 50 ], | |
[ 100, 33 ], | |
[ 330, 95 ], | |
[ 410, 12 ], | |
[ 475, 44 ], | |
[ 25, 67 ], | |
[ 85, 21 ], | |
[ 220, 88 ] | |
]; | |
var xScale = d3.scale.linear() | |
.domain([0, d3.max(dataset, function(d) { return d[0]; })]) | |
.range([0, w]); | |
var yScale = d3.scale.linear() | |
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
.range([0, h]); | |
var circles = svg.selectAll("circle") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr("cx", function(d) { | |
return xScale(d[0]); | |
}) | |
.attr("cy", function(d) { | |
return yScale(d[1]) | |
}) | |
.attr("r", 5) | |
svg.selectAll("circle") | |
.transition() | |
.delay(1000) | |
.duration(2500) | |
.attr("fill", "green") | |
.attr("cx", function(d, i) { return 10 * (i + 1); }) | |
.attr("cy", function(d, i) { return 10 * (i + 10); }) | |
var texts = svg.selectAll("text") | |
.data(dataset) | |
.enter() | |
.append("text") | |
.text(function(d) { | |
return d[0] + "," + d[1]; | |
}) | |
.attr("x", function(d) { | |
return xScale(d[0]); | |
}) | |
.attr("y", function(d) { | |
return yScale(d[1]); | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", "red"); | |
svg.selectAll("text") | |
.transition() | |
.delay(1000) | |
.duration(2500) | |
.attr("cx", function(d, i) { return 10 * (i + 1); }) | |
.attr("cy", function(d, i) { return 10 * (i + 10); }) | |
console.log("you are now rocking with d3", d3); | |
</script> | |
</body> |