Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Hhpies
Last edited Nov 21, 2019
Created on Nov 21, 2019

A face constructed from SVG shapes uses the D3.js `select` and `append` API to assemble a yellow circle, eyes, eyebrows, and an arc-based mouth. The code builds the figure by translating groups into position, then animates the eyebrows with a chained `transition().attr` call that moves them up and down over two seconds. The static geometry relies on D3's `arc()` generator for the mouth path, while the animation drives the two eyebrow rectangles through repeated attribute transitions.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

HHonza Cahlík
95% match
Loading thumbnail…

Let's Make a face with D3 !

A yellow circular face with black eyes, eyebrows, and an arc-shaped mouth is drawn in SVG using D3 v5. The code constructs shapes with `d3.select` and `d3.arc`, then animates the eyebrows via chained `transition.attr` calls that move them up and down over two-second intervals. The face is centered by translating a group element, and all geometry uses hardcoded pixel values.

CCao,Zhuo
94% 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
94% match
Loading thumbnail…

Let'S make a face with D3.js

This example uses D3.js v5 to construct an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

AArnaud Gbaguidi
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple yellow face using D3.js v5 and SVG shapes, with a large circle for the head, two smaller circles for eyes, rectangular eyebrows, and an arc-generated mouth. The eyebrows animate by translating up and down using chained `transition().duration()` calls on a group element. The code uses D3’s `select`, `arc`, and attribute-setting methods to construct the static elements, while the animation relies on D3’s transition system applied to SVG transforms. The data is hardcoded as constants for spacing, offsets, and radii, and the scene is centered within a 960×500 SVG canvas.

Kkh-tm
94% match
Loading thumbnail…

Let's make a face with D3.js

A face rendered in SVG displays yellow circular head, eyes, eyebrows, and a mouth. D3 v5 code builds the face using `d3.select`, `d3.arc` for the mouth path, and appended `circle` and `rect` elements. Eyebrows animate with `transition.duration()`, moving them downward and back over two seconds each way, while the head and features remain static against a dark blue background.

GGeolffrey S Mena
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes is rendered centered in a 960x500 viewport. D3 selections create circles for the eyes and an arc-generated path for the mouth, while rectangular eyebrows animate vertically via chained `transition().duration()` calls on a group element. The code imports `select` and `arc` from d3 v5, using SVG attributes like `cx`, `r`, and `transform` to compose the figure.

Ssakhabutdinov
94% match
Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780
94% match