This is the third step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of occupations. The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things
To not stray too far from D3.js I used the excellent tutorials on canvas and d3 from Irene Ros & Yannick Assogba which you can find here and here. I managed to get the circle packing working. However, when you zoom it is very jittery.
I wrote a more extensive tutorial around what I learned while doing this project in my blog Learnings from a D3.js addict on starting with Canvas in which this can be seen as step 3. See the previous, non-zoomable version here and the next better working zoomable version here. In the next version the d3 components have been downsized and the jitter is almost gone
If you want to see the final result, with everything up and running in canvas look here