Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Yyingzhe-z
Last edited Mar 15, 2021
Created on Mar 15, 2021

Built with D3 v5, this example builds a smiling face from SVG primitives, including a yellow circle head, eyes, a mouth drawn with the `arc` generator, and rectangular eyebrows. The `transition` API animates the eyebrows' vertical position over four seconds, moving them up and then back down. All elements are positioned relative to a centered `g` container using hand-coded offsets.

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!

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

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

A smiling face built entirely with D3.js v5 demonstrates basic SVG shape creation and animation. The code uses `d3.select` to append a yellow circle, two eye circles, and an arc-based mouth, while `d3.transition` animates the eyebrow rectangles upward and back over four seconds. SVG containers group each feature, and the face is centered via a translated `g` element. The example highlights fundamental DOM manipulation and chained transitions without any external data source.

YYue Ma
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!

A smiling face built with SVG renders a yellow circle, two eyes, and an arc-based mouth. D3.js v5 transitions animate the eyebrows, moving a group containing two rectangles upward and back down over a four-second loop. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to manipulate DOM elements directly, with static attributes for spacing and dimensions defined in JavaScript.

SSaip Can Hasbay
95% match
Loading thumbnail…

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

A friendly face built from SVG shapes—yellow circle head, black eyes, eyebrows, and an arc mouth—is centered in a 960×500 viewport. Using D3 v6, the visualization animates the eyebrows downward and back upward over two seconds via chained `transition()` calls on a `<g>` group. The code constructs shapes with primitive SVG elements and a D3 arc generator for the mouth, demonstrating basic selection, attribute binding, and transform animation without external data.

Yyingzhe-z
95% match
Loading thumbnail…

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

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

YYUTONG FENG
95% match
Loading thumbnail…

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

A smiling face built with SVG shapes demonstrates fundamental DOM manipulation using D3.js v5. The code constructs a yellow circle head, two eyes, and a mouth arc using the `d3.select`, `d3.arc`, and `d3.transition` APIs. The eyebrows, drawn as rectangles, animate vertically via chained `transition().duration()` calls, moving up and then back down over 2.8 seconds. All elements are positioned relative to the SVG's center using `transform` attributes.

BBobViz
95% match