Zoomable Treemap Bar Chart

Block-a-Day #12. Update of Treemap Bar Chart to enable zooming into a specific country on click.

Data Sources: Census

What I Learned: In a bit of treemap implementation trivia, nodes without a parent value of zero (i.e. those in a different continent than the selected country) will have NaN for their position values, as a result of a divide by zero, while those with a parent value but no value of their own will have position values, although width and height of, obviously, zero. I was originally just catching the NaNs, but this resulted in nodes flying to two different positions, thus the checking of d.value to determine how to position the nodes.

What I’d Do With More Time: Might be interesting if the transition was to vertically expand and fade the non-selected countries, to reinforce the idea of zooming in.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

1. Ideas over implementation. Do something novel, don’t sweat the details.
2. No more than two hours can be spent on coding (give or take).
3. Every. Single. Day.

Previously

• Map to Force-Directed Graph
• Brushable Scatterplot/Choropleth
• Treemap Bar Chart
• Triangular Scatterplot
• Choropleth with Animated Stripes
• Collatz Conjecture
• Bouncing Logo
• Rectangular Collision Detection
• Demers Catogram
• Gooey Exploding Scatterplot
• Zoomable Choropleth