Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Ppcbt1125
Last edited Nov 3, 2019
Created on Nov 3, 2019

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black-outlined eyes and animated eyebrows is rendered in SVG using D3.js. The face is built from D3 selections and shape generators, including `d3.arc` for the mouth path. Eyebrows transition vertically using `transition.attr` with a 2000-millisecond duration, creating a repeated raising motion. The example demonstrates basic D3 data binding, SVG shape construction, and animation chaining on a static, hardcoded dataset.

Sssdark
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn and animated using D3.js v5. The code builds the face with SVG shapes, positioning elements relative to the center of a 960×500 canvas. Eyebrows rise and fall repeatedly via chained `transition().duration(2000)` calls on the parent group. The mouth is generated using the `d3.arc()` helper with specified inner/outer radii and angular span, while the `select` API attaches elements to the SVG root.

PpilafGB62
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is rendered in SVG. The eyebrows animate upward and then back down over four seconds using chained D3 transitions. The code uses D3 v5 selections and the `d3.arc` generator to draw the mouth, while circles and rectangles create the other features. All elements are centered via a translated group.

Pprat1507
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow SVG face with black-outlined features animates its eyes and eyebrows in a looping sequence. The face is built using D3.js v5, with circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. Transitions scale both eyes and shift the eyebrows vertically over two-second intervals, creating a playful blinking and raising motion. The SVG is centered within a 960×500 viewport, rendered entirely with D3 selection and transition methods.

HHasideluxe
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn with D3.js v5, featuring two eyes, animated eyebrows, and a mouth created using the `d3.arc` generator. The face is centered within an SVG canvas, with facial features positioned via translation transforms. Eyebrows animate upward and downward using chained `transition` calls with a 1500-millisecond duration, while the mouth is rendered as an arc path between specified angles. The example demonstrates fundamental SVG shape creation and coordinate manipulation in D3.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a face with two eyes, animated eyebrows, and a smile, all built using D3.js v5 with SVG rendering. The code uses `d3.select`, `d3.arc`, and `selection.transition` to draw the head, eyes, mouth, and to animate the eyebrows up and down over two seconds. The face is centered on a 960×500 SVG canvas, with all shapes positioned via translations and hardcoded numeric offsets for features like eye spacing and eyebrow dimensions.

CCristian Pintor
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH
96% match