Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
Mmilkfam
Last edited Feb 21, 2021
Created on Feb 21, 2021

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The code creates circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3 selections and `transition` with `attr` chaining move the eyebrow group up and down over two-second intervals. The example demonstrates fundamental DOM manipulation with `select`, `append`, and `attr`, and uses `arc` from D3’s shape module to define the mouth path.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates basic SVG manipulation and animation with D3.js. The face is drawn using D3 selection methods to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is created using chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports specific functions like `select` and `arc` from the D3 v5 library and renders entirely as SVG within a fixed-size viewport.

Ddmpiq
98% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The code uses d3-selection to append SVG circles, rectangles, and an arc-generated mouth path onto a central group. Two sequential `transition` calls with 2000-millisecond durations move the eyebrows down and back up. D3 v5's `select` and `arc` utilities handle element selection and path geometry, while SVG attributes define the face's static features and the animation loop controls the eyebrow motion.

Eetiosa
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

DDeclan Naughton
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

LLG0498
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation and transitions. The face is built by appending SVG circles for the eyes and face, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Using `.transition().duration(2000)`, the eyebrow group shifts vertically down and back up, creating a repeated motion. The code explicitly imports `select` and `arc` from the D3 v5 library.

44charan4
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

SSnapika
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows and a shifting mouth is drawn as SVG elements using D3.js v5. The code builds the face by appending circles, rectangles, and an arc path to a group, then applies chained `transition` calls with a 2000-millisecond duration to move the eyebrows upward and alter the mouth’s end angle. It uses D3’s `select`, `arc`, and attribute manipulation to demonstrate fundamental DOM updates and transitions without any data source.

YYuqi Tang
97% match