conventions-layers
This example demonstrates d3-jetpack’s `d3.conventions` function, which creates a canvas, SVG, and HTML div layer (`layers: 'csd'`) that share a single coordinate system. Yellow circles bounce on canvas, cyan on SVG, and purple on HTML, while a scrolling time-series bar chart records simulated frame durations using a `d3.timer`. Each renderer draws its own colored bars and updates its layer independently, showing how multiple overlapping DOM elements can be synchronized for mixed-rendering visualizations.
AI-generated descriptiond3-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.