Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Pprachow
Last edited Feb 23, 2023
Created on Feb 22, 2023

A smiling yellow face animates against a black background, with blue rectangular eyebrows that bounce upward and downward, a red-outlined mouth, white teeth that rotate side to side, and a tongue. The code builds the face using D3.js v5 selections and the `d3.arc` shape generator, appending SVG circles, rects, and paths to a 1000x500 canvas. Multiple `transition().duration()` calls drive the eyebrow movement and teeth rotation, while static elements like eyes, nose, and mouth are positioned via SVG transforms.

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 Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows, teeth, and a tongue is rendered in SVG. The face uses D3.js v5 selection methods to construct circles, rectangles, and arc-generated paths for its features. Eyebrows and teeth move through chained transitions that alter their transforms over two-second intervals, while the mouth and tongue remain static. The code displays fundamental DOM manipulation, importing `select` and `arc` from D3.

Pprachow
96% match
Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation and animation with D3.js. The code selects an SVG element and builds the face using circles for eyes, rectangles for eyebrows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates its vertical position over two seconds, then returns it, creating a repetitive raising and lowering effect. The example relies on D3 v5 selections, attributes, and transitions in a straightforward SVG scene.

SSanjib Paudel
95% match
Loading thumbnail…

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

A yellow SVG face with pink cheeks, eyes, a nose, eyebrows, and a toothy smile is built through fundamental DOM manipulation in D3.js. The eyebrows animate up and down using chained `transition().duration()` calls on a group element. The face is composed of SVG primitives like `circle`, `rect`, and `path`, with the mouth and nose generated using the `d3.arc()` shape generator. The page loads D3 v5 from a CDN and renders entirely with SVG and animation.

PPrathyusha Jampala
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.

NNavaneeth-Ragi
95% match
Loading thumbnail…

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

This example builds a smiling yellow face using D3.js v5, drawing the head, eyes, and mouth as SVG shapes positioned with a centered group transform. The code uses `d3.select`, `d3.arc` for the mouth path, and property setters like `attr` for circles and rectangles. A chained `transition` with a 2-second duration animates the eyebrows upward and back down, creating a repeated eyebrow-raising motion. The face is rendered entirely with SVG elements, with no external data source, and uses a fixed 960×500 viewport.

VVishakha Routra
95% match
Loading thumbnail…

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

A smiling yellow face with black features animates its eyebrows, which move upward and then settle back down in a continuous loop. Built with D3.js v5, the visualization uses SVG shapes—circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The eyebrow motion is achieved through chained `transition()` calls that alter the group’s translate transform over two-second durations.

DDhiyan-jay
95% match
Loading thumbnail…

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

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and an arched mouth, all drawn in SVG. The eyebrows move up and down repeatedly using chained D3 transitions. The code builds the face by appending SVG elements to a group, using D3 v5's `select`, `attr`, and `arc` for the mouth path, with an implicit data-join-free DOM construction.

Ssohum42
95% match
Loading thumbnail…

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

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2
94% match