Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js

Public visualization

Viewing a saved revision (read-only)

07db6d308bda4ecf90c68854ebe1b452

Let's make a face with D3.js

0 stars0🌍 Public
AAtarius Armstrong
Last edited Jan 15, 2020
Created on Jan 15, 2020
Forked from HTML Starter

A face is assembled from modular SVG shapes, then animated through a D3 force simulation that distributes the features across the canvas. The code uses `d3.forceSimulation` with `forceCollide` and `forceManyBody` to repel and jitter the facial components—eyes, nose, mouth, and brows—until they settle into a recognizable layout. Rendered as `svg` elements in a React component, the example imports d3.v5 directly and relies on `d3.select` to update positions each tick. The data is generated inline with no external source.

AI-generated description

A bare minimum HTML page.

See also React Starter.