Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Bbballviz
Last edited Sep 28, 2022
Created on Sep 28, 2022

A smiling face built with D3.js v5 animates its eyebrows up and down. The demo shows fundamental SVG shape creation and DOM manipulation, using `d3.arc` for the mouth and chained `transition()` calls to shift the eyebrow group's transform. The yellow circle face, eyes, and rectangular brows are all appended to a centered `g` group, with no external data source.

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 smiling face made of SVG shapes uses D3.js selections and transitions to animate its eyebrows. The code builds a yellow circle for the head, two eyes, and an arc-based mouth. D3's `transition()` and `attr()` methods move the eyebrow group up and down. The example demonstrates fundamental DOM manipulation with D3 v5, drawing shapes directly in an SVG element.

Ccaptind
95% 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
95% match
Loading thumbnail…

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

A smiling face built entirely with D3.js v5 uses SVG shapes and transitions to animate its eyebrows. The code draws a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, all positioned within a centered group. D3’s `transition()` method moves the eyebrow group upward and back over two 2-second intervals, creating a repeated eyebrow-raising effect. The example demonstrates fundamental DOM manipulation and SVG rendering through D3’s `select`, `append`, and `arc` APIs.

BBeihaiTianming
95% match
Loading thumbnail…

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

A smiling face built entirely with D3.js v5 uses SVG shapes and transitions to animate its eyebrows. The code draws a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, all positioned within a centered group. D3’s `transition()` method moves the eyebrow group upward and back over two 2-second intervals, creating a repeated eyebrow-raising effect. The example demonstrates fundamental DOM manipulation and SVG rendering through D3’s `select`, `append`, and `arc` APIs.

BBeihaiTianming
95% match
Loading thumbnail…

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Ccraig harbottle
95% 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.js. The code uses d3.select, d3.arc, and chained transitions to move rectangular eyebrows up and down over time. The face is built from SVG circles for the eyes and head, and a path created with the arc generator for the mouth. All elements are positioned relative to a centered group using transform attributes.

Ssu10king
95% 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. The face is drawn entirely with SVG primitives—a circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated by `d3.arc` for the mouth. Using `d3.transition` with a two-second duration, the eyebrow group repeatedly shifts vertically, creating a bobbing motion. The code leverages D3 selections and attribute setting to build the static facial features, then applies chained transitions to animate the eyebrows independently of the rest of the face.

Aaanawaz
95% match
Loading thumbnail…

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

A yellow smiley face with blinking eyebrows is rendered as an SVG using D3.js v5. The face is centered via a group transform, with circles for eyes, rectangles for brows, and a path built with the `arc` generator for the mouth. Two chained `transition` calls on the eyebrow group animate its vertical position, moving the brows up and down over two-second intervals. This demonstrates fundamental DOM manipulation and chained transitions in D3.

VVis Ivaturi
95% match