Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
TThiago Ramos
Last edited May 12, 2020
Created on May 12, 2020

A smiley face with animated eyebrows demonstrates basic DOM manipulation with D3.js. The visualization renders SVG shapes—a yellow circle, eyes, rectangular eyebrows, and an arc-based mouth—centered on a 960×500 canvas. Using `d3.select` and `d3.arc`, the code constructs each facial feature programmatically. A chained `transition` with 2000-millisecond durations moves the eyebrow group upward and back, creating a blinking-like motion. The example showcases fundamental D3 v5 selections, attribute setting, and animation without external data, relying purely on geometric constants for positioning.

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 with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is constructed by appending SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all centered using a group transform. D3 transitions move the eyebrow group up and down over two-second intervals, while the `d3.arc` helper generates the mouth's curved path. The example uses d3.select and d3.arc from the D3 v5 library, with static SVG rendering and CSS to hide page overflow.

MMichał Szumnarski
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from SVG shapes. The face consists of a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based mouth, all positioned relative to an SVG group centered on the canvas. Using d3 selection and transition methods, the eyebrows perform a repeated up-and-down motion over two-second intervals. The code relies on d3.select, d3.arc for the mouth path, and chained transition.attrTween (via transition.attr) to animate the eyebrow group’s vertical offset, showcasing basic data-driven document updates without any external dataset.

Ttonestar
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The face is drawn using SVG shapes, including a circle for the head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` helper. The eyebrows move upward and downward through chained `transition().duration(2000)` calls, altering their vertical translation. The example uses D3 v5 selections to append and style SVG elements within a centered group, illustrating basic data-driven document updates without external datasets.

Jjufrank
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows upward and back down. The example demonstrates fundamental DOM manipulation with D3.js, using `d3.select` to append a yellow circle, two eye circles, arc-based mouth and eyebrow paths, and a rectangular eyebrow. D3 transitions (`transition().duration(2000)`) animate the eyebrow group’s vertical position. The code imports `select` and `arc` from D3 v5, rendering to an SVG canvas with hard-coded dimensions.

MMark Jones
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental D3.js DOM manipulation and SVG rendering. The face is built using D3 selections to append circles, rectangles, and an arc-generated mouth path onto an SVG canvas. Eyebrow animation is achieved through chained `transition().duration()` calls that shift the eyebrow group's transform attribute up and down over two-second intervals. The code imports `select` and `arc` from the D3 v5 library, with fixed pixel values controlling facial feature positions and dimensions.

Ggonghewan
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from SVG elements, with animated eyebrows that move up and down. The code uses D3 selections to append a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. It applies `transition` with a two-second duration to animate the eyebrow group’s vertical position, showcasing data-driven document updates. The rendering uses SVG within a 960x500 viewport, driven entirely by D3’s `select` and `arc` APIs.

MMrG113
96% 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
96% match