Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Mmariamy
Last edited Sep 18, 2019
Created on Sep 18, 2019

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

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!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives: a yellow circle, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows. The face is centered in an SVG canvas via a `g` element and coordinate transforms. The eyebrows animate using chained `transition().duration()` calls, moving up and down over two-second intervals. The code relies on D3 v5 selection, attribute setting, and transition APIs to mutate SVG elements directly.

Jjustprophet
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing a smiley face from SVG shapes and animating its eyebrows. A yellow circle forms the head, with eyes, rectangular eyebrows, and an arc-based mouth positioned using D3 selections and attribute setters. The code uses d3.select, d3.arc, and chained transitions with .transition().duration() to move the eyebrow group up and down over two 2-second cycles. All elements are appended to an SVG container, with positioning handled via transform attributes.

Ssslee8778960
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG primitives, complete with eyes, eyebrows, and a mouth. The eyebrows animate up and down using chained `transition().duration()` calls, shifting the eyebrow group’s `transform` attribute over two seconds. The code uses `d3.select` and `d3.arc` from the D3 v7 library, setting positions via `attr` and leveraging SVG circles, rectangles, and a path for the arc-based mouth.

黃黃歆善
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation by selecting an SVG, appending circles, rectangles, and a path created with the `arc` generator, and using `transition` to animate the eyebrow group’s transform attribute. The face is centered via a translated group, with all elements sized relative to the SVG’s dimensions. Rendering is SVG-based with a two-second transition loop.

Lleewardsmain
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes, including a yellow circle head, eyes, eyebrows, and an arc-based mouth. The code explicitly appends each shape using `d3.select` and `.append`, positioning them with translation attributes. The prominent behavior is an animated eyebrow movement, achieved through a chained `transition().duration(2000)` on the eyebrow group, which moves the brows down and back up. The rendering is SVG, and the animation is visible in a video embed, with the entire face recreated using only D3’s core selection and attribute methods.

Hhuankoh
97% match