Skip to main content
SimilarExport ZIP
100%

Gist b6c4be8ae9172f3c3eb4a599c8dc8756

✓ Published0🌍 Public
SSciutoAlex
Last edited Dec 8, 2016
Created on Dec 8, 2016

This example demonstrates a proof-of-concept integration of D3.js and p5.js, allowing custom p5 drawing functions to render D3 data joins on a canvas. It shows three colored rectangles whose dimensions and attributes (such as radius and spikes) are controlled by an array of color and width data. The code registers a custom `p5renderedElement` via `d3.registerP5Element`, then uses `d3.selectAll` and `.data()` to bind the dataset, with `.attr()` calls updating properties. A `draw()` function invokes `.render()` to execute the p5-based `elementDefinition`, while `mousePressed()` modifies attributes without immediate rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

d3 and canvas

This example demonstrates how to bind data to custom virtual elements and draw them to an HTML5 canvas using d3.v4. It renders a colorful grid of rectangles, where each cell’s size and fill style are animated via transitions. The code uses `d3.select` to append a canvas, `d3.range` to generate data, and `d3.scaleSequential` with `d3.interpolateSpectral` for color mapping. A `d3.timer` drives repeated canvas redraws, while the `draw()` function reads each custom element’s attributes (x, y, width, height, fillStyle) to paint the scene.

AAjayyy
74% 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
71% match
Loading thumbnail…

Hello, D3!

The example demonstrates how to draw a set of rectangles using the D3.js library version 4.12.2, where each rectangle’s width is mapped to a value from a hardcoded JavaScript array. It renders five default SVG `<rect>` elements, then uses the `d3.selectAll('rect')` method to bind the data array to those elements. The visualization does not explicitly set the rectangle widths or heights, so the shapes remain at their default size, but the data is attached and ready for subsequent styling.

PPaulPichot
70% 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
70% match
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
69% match
Loading thumbnail…

Data Joins

This example demonstrates D3 data joins by binding a dataset of country-weight pairs to SVG elements across two canvases. It starts by selecting and restyling existing rectangles with D3’s `select` and `attr`, then appends circles manually before using `data()` and `join()` to automatically create new circles mapped from the array’s `size` and `weight` values. The code also shows data transformation with `forEach`, grouping countries into weight arrays, and renders everything as SVG in a React setup using D3 v7.

Cchris.shimotake@gmail.com
69% match
Loading thumbnail…

Untitled

This example demonstrates how D3 custom elements can drive a canvas-based drawing surface. As the mouse moves, the code appends `custom:circle` elements to a `custom:sketch` element, each with a red stroke that transitions to white over two seconds while expanding to a radius of 200. A `d3.timer` continuously clears the canvas and redraws all child elements, translating their attributes into Canvas 2D `arc` and `stroke` commands. The sketch uses a custom namespace prefix registered with `d3.ns.prefix` to create these elements.

YYashasvi Koul
69% match
Loading thumbnail…

Bind data to html with d3

This example demonstrates how to bind external JSON data to SVG elements using D3. The code loads eye color and gender data from a GitHub gist, filters and transforms the entries into valid hexadecimal colors, then sorts them by blue channel value. It binds the data to circles, positioning them horizontally based on their index and coloring each fill with the corresponding eye color. The example uses `d3.json` for data loading, `d3.select` for DOM selection, and the data join pattern with `enter()` and `append()` to create circles without using any scales.

LLaurens
69% match