Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Ssantiago-gutierrez3
Last edited Jun 18, 2020
Created on Jun 18, 2020

This example builds a smiley face out of basic SVG shapes using D3.js, demonstrating fundamental DOM manipulation with selections and `attr()`. The face features a yellow circle head, eyes, a mouth drawn with the `d3.arc()` generator, and rectangular eyebrows that animate upward and downward via chained `transition().duration()` calls. The code imports specific functions like `select` and `arc` from the D3 v5 library, uses SVG elements rendered in an HTML page, and loops the eyebrow movement automatically. It showcases how to structure nested groups with `transform` attributes for positioning.

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 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!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiley face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by translating up and down in a loop using chained `transition()` calls with 2-second durations. The code demonstrates fundamental DOM manipulation via D3 selections, `append()`, and `attr()`, while the `arc()` generator from D3’s shape module creates the mouth path. All elements are centered using a translated SVG `<g>` group.

AAlain Jennotte
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The face is constructed entirely with SVG elements, including circles for the eyes, rectangles for the brows, and a mouth path generated with the `d3.arc` shape generator. The eyebrows perform a continuous up-and-down motion using chained `transition` and `duration` methods. The code imports `select` and `arc` from D3 v5, applies attributes directly to SVG shapes, and uses template literals for transform translations.

AAdrian Lawrence
96% 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!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate up and down in a looping motion. It demonstrates fundamental DOM manipulation using D3.js selections, appending a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. The animation runs via chained `transition()` calls with `.duration(2000)` on the eyebrow group. The code imports `select` and `arc` from the `d3` module and uses `attr()` to set positions and styles.

Aalbanodossantos
96% match
Loading thumbnail…

Let's make a face with D3.js!

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.

Mmariamy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel
96% match