Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
WWesley Yuen
Last edited Jan 16, 2020
Created on Jan 16, 2020

A yellow smiley face rendered in SVG has animated eyebrows that rise and fall. The face is built through basic DOM manipulation with D3.js, appending circles, rectangles, and an arc-shaped mouth to an SVG group. A chained `transition` with a 2000-millisecond duration moves the eyebrow group up and down. The example demonstrates core D3 v5 selections and transitions for simple, focused visual animations.

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 rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
97% 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
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG takes center stage, its eyebrows raising and lowering in a looping two-second transition. The example introduces fundamental DOM manipulation with D3.js v5, using `d3.select`, `d3.append`, and `d3.arc` to construct the face from circles, rectangles, and a path. The code explicitly sets SVG attributes like `r`, `cx`, and `transform`, and animates the eyebrow group via chained `transition().duration(2000)` calls. No external data source is used; the face is purely generated from hardcoded dimensions.

WWesley Clark
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely through D3.js selections and SVG shapes. The face uses circles for the head and eyes, rectangles for the brows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates their vertical position over two seconds, moving them up and back down, demonstrating fundamental DOM manipulation and tween-less attribute transitions in D3 v5.

Mmi-desai
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, and its eyebrows animate upward and downward in a looping motion. The face is built entirely through D3.js v5 selections, appending circles for the eyes and a path created with the `arc` generator for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the eyebrow group’s vertical translation. The code imports `select` and `arc` from D3 and positions all elements relative to the SVG’s center.

WWesley Yuen
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates D3.js DOM manipulation and SVG rendering. The code uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`. Chained `transition().duration()` calls repeatedly shift the eyebrow group’s `transform` attribute, creating a bouncing motion. All elements are centered within a fixed 960×500 SVG viewport.

WWesley Yuen
97% 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
97% match