Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
TThomas Nield
Last edited Nov 24, 2019
Created on Nov 24, 2019

A yellow smiley face is drawn in SVG using D3.js v5, with animated eyebrows that shift downward and back over two seconds. The code builds the face by manipulating SVG elements—circles for the head and eyes, rectangles for brows, and a path generated with d3.arc for the mouth. Select and transition methods drive the eyebrow movement, while the layout is centered using width and height attributes from the SVG. Eyebrow positions and eye spacing are defined as numeric constants.

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 yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

VVito
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn inside an SVG using D3.js v5. The code creates the face’s head, eyes, and mouth with `select`, `append`, and `arc` for the smile path. Eyebrows are rectangles whose vertical position animates in a loop via chained `transition().duration()` calls, moving up and down. The example demonstrates fundamental DOM manipulation and data-driven shape generation without external data, relying solely on the D3 library.

Mmin
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is built entirely with D3.js v5 selections and SVG elements. The code uses `d3.select` to target an SVG container, `d3.arc` to draw the mouth as a path, and chained `transition.attr` calls to repeatedly move the eyebrows up and down over 2-second intervals. Circles and rectangles form the eyes and brows, with positions calculated relative to the SVG center.

Mmartvdmarel
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely in SVG using D3.js v5. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and building the face from basic shapes like circles and rectangles. D3 transitions move a shared eyebrow group up and down over two one-second intervals, while a mouth path is created using the `d3.arc` generator with specified inner and outer radii and smile angles.

Mmoha0902
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Ccguibourg
95% match