d3 and canvas

100%

✓ Published0🌍 Public

Last edited Apr 11, 2022

Created on Apr 11, 2022

D3 version 4 and the HTML5 Canvas API draw animated, colored grids of cells whose count is set by user input between 1 and 10,000. The code binds data to custom DOM elements, using transitions to animate cell size and fillStyle, then a d3.timer repeatedly invokes a draw function that clears and repaints the canvas. A d3.scaleSequential with d3.interpolateSpectral maps data values to colors.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 and canvas - the bind, the draw and the pick

This example demonstrates how d3 and Canvas can work together for interactive visualization, showing 5,000 colored grid cells arranged in a 10x10 group layout. The code uses d3.v4 to bind data to custom DOM elements, applying sequential color scales with d3.interpolateSpectral. Rendering happens through a main canvas while a hidden canvas uses unique generated RGB colors and a color-to-node map for picking interactions. A tooltip appears on hover, and d3.timer animates cell widths during transitions, with optional React integration via VizHub.

Llars verspohl

88% match

Loading thumbnail…

d3 and canvas - the bind and the draw

This example demonstrates how D3’s data join can drive canvas rendering through a custom HTML element as an intermediate container. The visualization displays a grid of colored cells, with the number of cells controlled by a text input, and animates their appearance. The code binds data to custom elements using D3’s `selectAll`, `enter`, and `merge`, then draws each cell’s position and fill style onto a 2D canvas context, using a `d3.scaleSequential` color scale and `d3.timer` for animation.

Llars verspohl

87% match

Loading thumbnail…

Fork of d3 and canvas - the bind, the draw and the pick

This example shows an interactive canvas visualization of 5,000 colored grid cells, where users can adjust the number of cells via a text input and hover to see a tooltip with the cell’s value. It uses D3 v4 for data binding and scales, while rendering both a visible canvas and a hidden canvas for color-based picking—mapping each cell to a unique RGB color via `getImageData` to identify hovered elements. The demo includes a timer-driven animation that redraws the grid over 300 milliseconds.

Yyar

82% match

Loading thumbnail…

d3 and canvas - the bind, the draw and the pick

This example demonstrates a dynamic grid of colored cells on an HTML canvas, where each cell represents a data point. A hidden secondary canvas is used for mouse picking; each cell gets a unique color assigned via `genColor()`, and this color is mapped to the original data in a dictionary (`colourToNode`). When the user hovers over the visible canvas, the tooltip displays the corresponding data value by reading the pixel color from the hidden canvas. The visualization uses d3.v4 for data binding and transitions, and it redraws both canvases continuously.

AAngelos Chatzimparmpas

81% match

Loading thumbnail…

Fork of d3 and canvas - the bind, the draw and the pick

This example demonstrates a grid of colored rectangles, where each cell represents a data point and its color is mapped from its value using a spectral color scale. The visualization implements a picking mechanism for canvas-based interactivity by assigning each rectangle a unique, hidden color stored in a separate off-screen canvas. Using D3 v4, the code binds data to custom elements, then draws the visible grid with animations, while the hidden canvas enables precise hit-testing through color lookup, demonstrated with a tooltip.

Oonceup

79% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

74% match

Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

GGusnaRWX

73% 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

73% match