Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published3🌍 Public
Wwen787
Last edited Jun 25, 2019
Created on Jun 25, 2019

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

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 draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
100% match
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
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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, animating its eyebrows upward and downward in a looping motion. It demonstrates fundamental DOM selection and manipulation using `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to move SVG elements. The face is constructed from basic SVG shapes—circles, rectangles, and a path—positioned via `attr` transforms within a centered group. The code uses D3 v5 and renders entirely in SVG without external data.

SSteveberrey
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple smiley face in an SVG canvas using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates basic DOM selection and manipulation via `d3.select` and `append`, alongside geometric positioning with `attr`. A notable feature is the animated eyebrows, which move up and down repeatedly using chained `transition().duration()` calls that alternate the group’s `transform` attribute. The example uses D3’s `arc` generator to draw the mouth and relies on plain SVG elements, showing how to combine static shapes with simple programmatic animation.

Cchenyucook
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds a yellow smiley face with eyes, eyebrows, and an arc-based mouth, then animates the eyebrows upward and back down using chained `transition` calls on SVG `rect` elements. The face is centered via a `g` transform, with `d3.arc` generating the mouth path. The code selects an SVG, appends shapes with explicit pixel offsets, and relies on D3 v5’s `select`, `attr`, and `transition` APIs to demonstrate fundamental DOM manipulation and animation.

Ssathishkottravel
96% match