This is a re-implementation of Mike Bostock's 'Diamonds' bl.ock which renders a large dataset (53k points) to canvas. It takes a number of seconds to render the data, so it is batched into 'chunks' of 500 points in order to avoid having a blank page.

This bl.ock re-implements the example using d3fc which has chart and series components that support rendering to Canvas or SVG. The goal of d3fc is to extend the vocabulary of D3 from basic SVG / Canvas constructs of paths, circles and rectangles, to support a charting vocabulary of series, charts and legends. In this case the code is (marginally) simpler than the D3 equivalent, but has the advantage that the chart is 'responsive', if you open the chart in a new window and re-size you'll find that it re-renders automatically.

The batching of the rendered data is a slightly unusual concept, with d3fc components are rendered via a data-join, which isn;t really compatible with this concept. The Cartesian chart component used in this example makes use of d3fc-element which provides draw and measure events, that provide layout and (throttled) rendering. The solution employed in this example is to bind the chart to an empty array via a data-join, then handle the draw event directly, batching the data and rendering vi the series component.

Slightly unusual, but effective!