Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid
Last active June 28, 2019 23:36
Show Gist options
  • Save Andrew-Reid/1fcabb17a80c41244da3888851e9f1b7 to your computer and use it in GitHub Desktop.
Save Andrew-Reid/1fcabb17a80c41244da3888851e9f1b7 to your computer and use it in GitHub Desktop.
Transitioning Numbers
<!DOCTYPE html>
<meta charset="utf-8">
<div></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var svg = d3.select("div")
.append("svg")
.attr("width",960)
.attr("height",500);
var colors = [["#e0ecf4","#9ebcda","#8856a7"],["#74c476","#31a354","#006d2c"],["#a63603","#e6550d","#fd8d3c"]];
var data = function() {
return d3.range(3).map(function(d,i) {
return {color: colors[i], num: Math.random()*1000 | 0 }
})
}
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d,i) {
return "translate("+[0,(i*160)]+")";
})
.each(generator);
setInterval(function(){
svg.selectAll("g")
.data(data())
.each(generator);
}, 3000);
function generator(d) {
var margin = 5;
var lgSize = 70;
var mdSize = (lgSize-margin*2)/3;
var smSize = (mdSize-margin*2)/3;
var height = lgSize*2+margin;
var n = d.num;
var color = d.color;
var lg = Math.floor(n/100);
var md = Math.floor(n%100/10);
var sm = n%10;
var g = d3.select(this);
var selection = g.selectAll(".token")
.data(d3.range(lg+md+sm));
selection.exit()
.transition()
.attr("width",0)
.remove()
selection.enter()
.append("rect")
.attr("opacity",1)
.attr("x", function(d) {
// Large squares:
if(d < lg) {
return Math.floor(d/2)*(lgSize+margin)+lgSize/2;
}
// Medium squares:
else if(d< lg+md) {
var x = Math.floor(lg/2)*(lgSize+margin);
return x+ Math.floor((d-lg)/3)*(mdSize+margin)+mdSize/2;
}
// Small squares
else {
if(md !=9) {
var x1 = Math.floor(lg/2)*(lgSize+margin);
var x2 = x1 + Math.floor(md/3)*(mdSize+margin);
return x2+(d-lg-md)%3*(smSize+margin)+smSize/2;
}
else {
var offset = lg%2 ? 0 : lgSize+margin;
var x = Math.floor((lg+2)/2)*(lgSize+margin);
return x-offset+smSize/2;
}
}
})
.attr("y", function(d) {
// Large squares:
if(d < lg) {
return (d)%2 * (lgSize+margin)+lgSize/2;
}
// Medium squares:
else if(d < md + lg) {
var y = lg%2 * (lgSize+margin);
return y + (d-lg)%3 * (mdSize + margin) +mdSize/2
}
// Small Squares:
else {
if(md !=9) {
var y1 = lg%2 * (lgSize+margin);
var y2 = y1 + md%3 * (mdSize + margin)
return y2 + Math.floor((d-lg-md)/3)*(smSize+margin)+smSize/2;
}
else {
var offset = lg%2 ? 0 : lgSize+margin;
return Math.floor((d-lg-md))*(smSize+margin)+offset+smSize/2;
}
}
})
.attr("width",0)
.attr("height",0)
.attr("class","token")
.merge(selection)
.transition()
.duration(1000)
.attr("x", function(d) {
// Large squares:
if(d < lg) {
return Math.floor(d/2)*(lgSize+margin);
}
// Medium squares:
else if(d< lg+md) {
var x = Math.floor(lg/2)*(lgSize+margin);
return x+ Math.floor((d-lg)/3)*(mdSize+margin);
}
// Small squares
else {
if(md !=9) {
var x1 = Math.floor(lg/2)*(lgSize+margin);
var x2 = x1 + Math.floor(md/3)*(mdSize+margin);
return x2+(d-lg-md)%3*(smSize+margin);
}
else {
var offset = lg%2 ? 0 : lgSize+margin;
var x = Math.floor((lg+2)/2)*(lgSize+margin);
return x-offset;
}
}
})
.attr("y", function(d) {
// Large squares:
if(d < lg) {
return (d)%2 * (lgSize+margin);
}
// Medium squares:
else if(d < md + lg) {
var y = lg%2 * (lgSize+margin);
return y + (d-lg)%3 * (mdSize + margin)
}
// Small Squares:
else {
if(md !=9) {
var y1 = lg%2 * (lgSize+margin);
var y2 = y1 + md%3 * (mdSize + margin)
return y2 + Math.floor((d-lg-md)/3)*(smSize+margin);
}
else {
var offset = lg%2 ? 0 : lgSize+margin;
return Math.floor((d-lg-md))*(smSize+margin)+offset;
}
}
})
.attr("width",function(d) {
if(d < lg) return lgSize;
if(d < lg+md) return mdSize;
return smSize;
})
.attr("height",function(d) {
if(d < lg) return lgSize;
if(d < lg+md) return mdSize;
return smSize;
})
.attr("fill", function(d) {
if( d < lg) return color[0];
if (d < lg+md) return color[1];
else return color[2];
})
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment