Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
MMartin Lord
Last edited Apr 15, 2020
Created on Apr 15, 2020

A yellow smiley face is drawn with SVG shapes, including a circle head, two eyes, and an arc-based mouth, all centered via a transformed group. D3.js v5 selections append and style these elements, while a chained `transition` with `duration` settings animates the entire eyebrow group upward and then back down, making the expression shift. The example highlights basic DOM manipulation and transition timing with `select` and `arc`.

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 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 drawn with SVG demonstrates fundamental D3.js DOM manipulation and transitions. The code selects the SVG element, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth using `d3.arc`. Two eyebrow rectangles animate upward and back via chained `transition().duration(2000)` calls, shifting their parent group's transform attribute. The example uses D3 v5 and relies on `select` and `arc` from the d3 module.

JJepyagg
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

BBendrog
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match