Skip to main content
SimilarExport ZIP
100%

2 Let's make a face with D3.js!

✓ Published0🌍 Public
RRolftest
Last edited Oct 23, 2021
Created on Oct 23, 2021

A yellow smiley face is drawn with SVG shapes, using a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The example demonstrates fundamental D3.js DOM manipulation and animation by using `d3.select` to target the SVG, `d3.append` to add elements, and chained `transition` calls with a 2000-millisecond duration to move the eyebrows up and down. The code also uses `d3.arc` to calculate the path for the mouth shape.

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 is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi
95% match
Loading thumbnail…

Let's make a face with D3.js (v2)!

A yellow smiley face is drawn with SVG, featuring circles for eyes and a mouth created with d3.arc. Its animated eyebrows, rendered as rectangles, rise and fall repeatedly via chained transitions on the transform attribute. The example demonstrates fundamental DOM manipulation with d3.select and d3.append, using d3.v5 to build the shape from geometric primitives.

TTim
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn entirely with D3.js SVG elements, including a yellow circle for the head, two eyes, and an arc-based mouth. The example demonstrates fundamental DOM manipulation by appending and styling shapes, then animates the eyebrows with a chained `transition().duration()` that moves them up and down. It uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and attribute setters like `.attr()` to position each component relative to a centered group. The animation runs once on load, with no user interaction.

SSH
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and rectangular eyebrows that animate upward and back in a looping motion. The example demonstrates fundamental SVG DOM manipulation by selecting an `<svg>` element and appending grouped shapes with `d3.select` and `append`. It uses D3's `arc` generator to create the mouth path and `transition().duration()` to move the eyebrows and mouth, with attributes like `attr` and `translate` transforms controlling position and animation.

Mmirna981
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with its eyebrows animated to move up and down in a continuous loop. The example demonstrates basic DOM manipulation with D3.js, using `d3.select` and `d3.append` to build the face from circles, rectangles, and a path, then applying `transition().duration()` to animate the eyebrow movement. The mouth is created using the `d3.arc` shape generator, and the entire scene is centered within an SVG canvas of fixed dimensions.

FfacundoEMartin
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate basic DOM manipulation and animation. The face is built by appending circles for the head and eyes, rectangles for eyebrows, and a path generated with the `d3.arc()` API for the mouth. The eyebrows animate upward and back down over two sequential 2000-millisecond transitions, showing how `selection.transition()` chains. The code uses `d3.select` to manipulate the SVG elements and sets coordinates with fixed pixel offsets for facial features.

DDaniel Hug
94% match