Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Bbroomc
Last edited Mar 7, 2020
Created on Mar 7, 2020

A smiley face built with D3.js demonstrates basic SVG shape creation and animated DOM manipulation. The face consists of yellow circle for the head, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows that move up and down using chained `transition().duration()` calls. The code uses D3 v5 selections, `append`, and attribute setters to construct the static elements, while the eyebrow animation shows how transitions can alter the `transform` attribute over time. This example highlights fundamental data-driven document manipulation without any external dataset.

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 smiley face built with D3.js demonstrates fundamental DOM manipulation and animation. The code uses `d3.select` to append SVG circle and rectangle elements for the face, eyes, and eyebrows, while a D3 arc path creates the mouth. Eyebrow movement is shown through chained `transition` calls that animate the group's transform attribute over two-second durations. The yellow face with black outlines highlights basic SVG rendering and D3's data-driven approach to styling and positioning.

Ccyanea1
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js. The code builds the face using SVG elements via `d3.select`, `append`, and shape attributes, then animates the eyebrows with chained `transition().duration()` calls on a transform. A mouth is drawn using the `d3.arc` path generator. The example runs entirely in the browser without external data, relying on D3 v5’s selection and transition APIs to update the SVG structure over time.

Iinstant2333
97% 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
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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The face is drawn using SVG shapes, including a circle for the head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` helper. The eyebrows move upward and downward through chained `transition().duration(2000)` calls, altering their vertical translation. The example uses D3 v5 selections to append and style SVG elements within a centered group, illustrating basic data-driven document updates without external datasets.

Jjufrank
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from SVG elements, with animated eyebrows that move up and down. The code uses D3 selections to append a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. It applies `transition` with a two-second duration to animate the eyebrow group’s vertical position, showcasing data-driven document updates. The rendering uses SVG within a 960x500 viewport, driven entirely by D3’s `select` and `arc` APIs.

MMrG113
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The code builds an SVG face from primitive shapes—a yellow circle for the head, eyes, a mouth via `d3.arc`, and rectangular eyebrows—centered using a translation. It then animates the brows upward and back over two seconds using chained `.transition().duration(2000)` calls, showing how to select elements, append shapes, and apply sequential transitions. The example uses D3 v5 and renders entirely in the browser as an animated SVG.

Mminimartzz
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
96% match