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 NaN
s, 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.
Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:
- Ideas over implementation. Do something novel, don't sweat the details.
- No more than two hours can be spent on coding (give or take).
- Every. Single. Day.
- 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
forked from cmgiven's block: Zoomable Treemap Bar Chart
forked from noblemillie's block: Zoomable Treemap Bar Chart
forked from noblemillie's block: Zoomable Treemap Bar Chart