SVG vs Canvas D3

100%

SVG vs Canvas D3

✓ Published0🌍 Public

Last edited Nov 23, 2017

Created on Nov 22, 2017

This example compares the performance of rendering 20,000 lines using SVG versus Canvas in D3 v4. It demonstrates both discrete diverging color scales with `d3.scaleThreshold` and `d3.schemePuOr`, and continuous diverging scales with `d3.scaleSequential` and `d3.interpolatePuOr`. Two buttons trigger drawing with either approach, and each displays the elapsed time via the `performance.now()` API. The SVG version appends individual `<path>` elements, while the Canvas version draws directly to a 2D context and overlays an SVG axis.

AI-generated description

An example to ilustrate the difference of using d3.scaleThreshold vs d3.scaleSequential for creating discrete vs continuous diverging scales using d3.v4 and d3-scale-chromatic

Similar vizzes

Loading thumbnail…

Discrete vs continuous diverging scales with d3-scale-chromatic

This example compares discrete and continuous diverging color scales by rendering 2,000 thin vertical lines on a Canvas, with a translucent SVG overlay for the axis. The top band uses a `d3.scaleThreshold` with a domain divided into five steps and the `d3.schemePuOr` array, producing sharp color boundaries. The bottom band uses a `d3.scaleSequential` with `d3.interpolatePuOr` over a continuous [-1, 1] domain, creating a smooth gradient. Both scales map the same input range, and the code relies on d3.v4 and d3-scale-chromatic to draw the comparison.

Aandyreagan

80% match

Loading thumbnail…

Discrete vs continuous sequential scales with d3-scale-chromatic

This example contrasts discrete and continuous sequential color scales by drawing two bands of vertical lines on a canvas, with an SVG axis overlay. The top band uses a `d3.scaleThreshold` with `d3.schemeGreens[5]` to produce five distinct color steps, while the bottom band uses a `d3.scaleSequential` with `d3.interpolateGreens` for a smooth gradient. Both map a 0–100 domain to color, with lines sampled every 0.001 units. The code renders 100,000 lines per band using the Canvas 2D API for speed, while D3 v4 and d3-scale-chromatic handle the scales and axis.

Aandyreagan

78% match

Loading thumbnail…

svg canvas clip-path

A side-by-side demonstration compares SVG and Canvas clipping in real time. Both render 80 randomly positioned circles and the text “SVG Clip Path” inside a circular clip region that follows the mouse. The SVG view uses a `<clipPath>` with a `<circle>` element, while the Canvas view applies the same path via `ctx.clip()`. D3 v5 handles mouse events and element selection, updating the clip circle’s `cx` and `cy` attributes and redrawing the canvas on each move.

11Cr18Ni9

75% match

Loading thumbnail…

svg & canvas & brush

This example overlays a canvas-rendered scatterplot of 1,000 randomly generated points with an SVG layer containing axes and a d3.brush selection rectangle. The canvas continuously redraws each frame using `requestAnimationFrame`, highlighting points under the mouse cursor via `ctx.isPointInPath` and filling those inside the brush area. The SVG brush, configured with `d3.brush()`, updates the selection bounds, demonstrating a hybrid approach that combines canvas performance with SVG’s interactive brush capabilities.

11Cr18Ni9

75% match

Loading thumbnail…

column-render

This example compares two canvas-based techniques for rendering line charts with large datasets. It draws a time series of system metrics (CPU idle percentage, memory usage) using both chained `lineTo` commands and a column-oriented approach that groups points by their x-coordinate. The column method renders up to three times faster with a million points and provides better control over anti-aliasing blur. The code uses D3.js for data loading and scaling, and Canvas API methods like `ctx.lineTo`, `ctx.moveTo`, and `ctx.clearRect`. Clicking either chart re-renders it and displays the elapsed time.

11wheel

73% match

Loading thumbnail…

Untitled

Two SVG canvases demonstrate basic line drawing with D3 v5. The first shows a single fixed red line, while the second uses `d3.select` and `.enter().append('line')` to map an array of seven numeric values to multiple blue and green lines with varying coordinates. The blue lines position themselves horizontally based on array index, while green lines stagger vertically. Both use SVG attributes like `x1`, `y1`, `x2`, and `y2` with inline stroke styles, rendered against light and dark gray backgrounds. The page loads D3 from a CDN and renders purely as vector SVG without animation or interaction.

JJimMaltby

72% match

Loading thumbnail…

Canvas Path Benchmark

This benchmark measures the time required to draw 5,000 individual line segments on an HTML5 Canvas, comparing rendering performance across browsers. It shows how Canvas path drawing scales with increasing segment counts, with results tabulated in real time. The code uses the Canvas 2D API’s `beginPath`, `moveTo`, `lineTo`, and `stroke` methods, along with `requestAnimationFrame` to pace animation frames. It runs randomized segment generation with a subtle correction toward the canvas center, logging elapsed time per set and cumulative time in a table. The example is derived from a similar SVG benchmark, highlighting differences between Canvas and SVG rendering speeds.

GGerHobbelt

72% match

Loading thumbnail…

DOM-to-Canvas using D3

This example shows a canvas scenegraph implemented using custom namespaced DOM elements, where moving the mouse appends `custom:circle` elements that grow and fade over two seconds. A timer continuously redraws the canvas by iterating over the DOM children, mapping each element’s attributes to Canvas API calls like `beginPath` and `arc`. The code uses D3 v3’s `d3.select`, `d3.event`, `d3.timer`, and `d3.ns.prefix` to manage the custom namespace and transitions, demonstrating an alternative to SVG for customized rendering scenarios.

Mmbostock

72% match