Mixed-mode rendering

As explained in D3.js in Action, Third Edition

Mixed-mode rendering is a visualization technique that combines SVG and Canvas layers to render different portions of the same visualization.

Mixed-mode rendering combines SVG and Canvas layers so each portion of a visualization uses the technology best suited to its rendering and performance needs. section 15.3

A practical implementation separates the visualization into layered responsibilities:

• Keep axes and lower-volume chart elements in SVG, preserving responsive and interactive structure. section 15.3
• Place a Canvas element above the SVG for numerous marks such as painting circles. section 15.3
• Plan interaction separately because Canvas drawings do not become accessible DOM elements. section 15.5

Van Gogh small multiples

A Van Gogh visualization keeps radial area and bar charts in SVG while Canvas renders more than 1,000 painting circles, reducing pressure from the SVG and force-layout workload. section 15.3

Figure 15.11 Adopting the mixed-mode rendering approach, we use an SVG container to display the axes, drawings, and letters, and we add a canvas element on top that renders the painting circles.

The layered figure makes the division of responsibilities visible: SVG displays axes and chart elements, while Canvas overlays the painting circles. section 15.3

How D3.js in Action, Third Edition covers it

How deep it goes

Explains layer planning, Canvas sizing, context initialization, and circle drawing, while deferring detailed interaction strategies.

Examples

Uses Van Gogh small multiples, painting circles, radial charts, layered elements, and Canvas drawing code.

What you can do after

Build it from scratch by layering SVG and Canvas, initializing a 2D context, and drawing high-volume marks.

How it connects

Connects SVG, Canvas, DOM interaction, force layout, device-pixel density, and data visualization performance.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

• canvas elementuses · The HTML canvas element is a scriptable bitmap drawing surface in a web document for rendering graphics.
• SVGuses · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.