David Bumbeishvili bumbeishvili

Adapted from Mike Bostock's Zoomable Sunburst to include arc labels.

Click on any arc to zoom in. Click on the center circle to zoom out. Click on canvas background to reset zoom.

Also packaged as a reusable component at sunburst-chart.

d3-jetpack's d3.conventions can now create canvas and html elements. Here d3.conventions({layers: 'csd'}) makes an canvas ctx, svg and div with a shared coordinate system. Yellow shapes are drawn on canvas, cyan on svg and purple on html.

Layers are position absolutely on top of each other in the order listed in the layer string. To create an svg with two canvas elements on top:

var {layers: [svg, bg_ctx, fg_ctx]} = d3.conventions({layers: 'scc'})

Hurricane How-To describes using multiple renders for something more practical than bouncing circles.

Converting an SVG animation to a video with the MediaRecorder API and a hidden canvas.

Drawing frames from img elements can introduce an extra delay, so this version generates all the frames upfront and then renders them in a loop with requestAnimationFrame().