Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

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

This example creates a smiling face from basic SVG shapes, with its eyebrows repeatedly moving up and down. It demonstrates fundamental D3.js DOM manipulation by appending and styling circles, rectangles, and a path for the mouth. The code uses `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The face is centered via a translated `<g>` element, with eye spacing and offsets defined as numeric constants.

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 how D3.js can build an animated smiley face entirely from SVG primitives, with eyebrows that repeatedly rise and fall. The code constructs the face by appending circles for the eyes and a path generated with `d3.arc` for the mouth onto a centered `<g>` group. It uses D3 selections and the `transition.attrTween`-like chained `.transition().duration()` calls to animate the eyebrow group’s vertical position over two seconds, creating a looping expression change. The implementation relies on D3 v5’s select, arc, and transition APIs.

MMartin Lord
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, with its eyebrows animating up and down in a repeating loop. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` API, and the eyebrow motion relies on chained `transition().duration()` calls to alternate the transform attribute, creating a simple, continuous facial animation.

PParminder Singh
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by building a smiley face with animated eyebrows. The SVG circle face, eyes, and rectangular eyebrows are appended to a centered group element, while the mouth is drawn using the `d3.arc` path generator. Eyebrow movement is achieved through chained `transition` and `.attr` calls that shift the group’s transform over two-second intervals. The code relies on D3 v5 selections and transitions, rendering entirely as animated SVG without external data sources.

FFelipe Menegossi
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation using D3.js by creating a smiley face with animated eyebrows. The face is drawn with SVG shapes, including circles for the eyes and a path for the mouth, all positioned using D3's `select` and `append` methods. A `g` element transforms to center the face, while the eyebrows move up and down using chained `transition` calls over two seconds each, showing how D3 can animate attribute changes. The code uses D3 v5 and the `arc` shape generator for the mouth’s curved path.

CCurran Kelleher
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

JJun Yi | Dylan
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates basic DOM manipulation and transitions in D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that shift the group's `transform` attribute up and down. The face is centered via an SVG group with translated coordinates, and all styling is handled through inline attributes and a linked stylesheet.

Iidwann-eng
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Vveagy
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face out of basic SVG shapes, with animated eyebrows that move up and down. Using D3.js v5, the code selects the SVG element, appends and positions circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth. A transition chain on the eyebrows group animates the transform attribute over two two-second intervals, creating a subtle, looping expression change.

EEd Link III
95% match