forked from zanarmstrong's block: Adaption of Jfire.io animation, for teaching purposes
forked from zanarmstrong's block: Stripped adaptation of Jfire.io animation, for teaching purposes
forked from zanarmstrong's block: Adaption of Jfire.io animation, for teaching purposes
forked from zanarmstrong's block: Stripped adaptation of Jfire.io animation, for teaching purposes
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
</style> | |
</head> | |
<body> | |
<script> | |
// created by http://jfire.io/animations/2015-03-09/, adapted for demo | |
var width = 500, | |
height = 500, | |
n = 20; | |
var margin = {top: 20, right: 10, bottom: 20, left: 10}; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
var g = svg.selectAll(".groups") | |
.data(d3.range(n)) | |
.enter().append("g").attr("class", "group"); | |
// step #1 -> what elements/attributes do you need to define? | |
g.append("xxx")."xxxxxx" | |
g.selectAll("xxxxxx") | |
.data(["xxxx", "xxxxx"]) | |
.enter().append("xxxxx") | |
// step #2: write a translation and scalar function to replace the xxxx's below | |
g.attr("transform", function(d) {return "translate(xxxxxx)scale(xxxxx)";}) | |
// step #3: add time as an element in your translation function to animate | |
/* | |
d3.timer(function(time) { | |
g.attr("transform", function(d) {return "translate(xxxxxx)scale(xxxxx)";}) | |
}); | |
*/ | |
</script> | |
</body> |