Last active
June 28, 2019 23:36
-
-
Save Andrew-Reid/1fcabb17a80c41244da3888851e9f1b7 to your computer and use it in GitHub Desktop.
Transitioning Numbers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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