Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published2🌍 Public

Last edited Apr 20, 2020

Created on Apr 20, 2020

Forked from Let's make a face with D3.js!

A face is drawn as a smiley with yellow fill, black stroke, circular eyes, and an arc-shaped mouth on an SVG canvas. The code demonstrates fundamental D3.js DOM manipulation by appending shapes to a group element, using `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows, which move up and down over two-second intervals. The rendering is entirely SVG with a simple animation loop.

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 from basic SVG shapes—a yellow circle, two eyes, and a mouth—demonstrates D3.js DOM manipulation. The code uses `d3.select` and `d3.append` to construct elements, while `d3.arc` defines the mouth path. A continuous `transition` animates the eyebrows upward and downward over two-second intervals, showing chained movement. The example relies on D3 v5, rendering in SVG, with dimensions taken directly from the `<svg>` attributes.

AAravind Subramaniam

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 from basic SVG shapes. The face comprises a yellow circle, two eyes, and a mouth drawn as an arc path, with eyebrows that move up and down using chained `transition().duration()` calls. The code builds the face by appending circles, rectangles, and a path to the SVG, using `d3.select` and `d3.arc` from D3 v5.

GGuruBigData

96% 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

96% match

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, and its eyebrows animate up and down in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by appending circles, rectangles, and an arc-generated mouth to an SVG canvas. It uses the `d3.select` and `d3.arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow group's transform. The code imports from D3 v5 and renders entirely with SVG elements on a 960 by 500 canvas.

Cchrisvaillancourt

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black eyes and a curved mouth is drawn on an SVG canvas using D3.js. The example demonstrates fundamental DOM manipulation with methods like `select`, `append`, and `attr` to create circles, rectangles, and a path generated with the `arc` function. Animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls with a 2000-millisecond duration, showcasing basic animation in D3 v6.

Bbbak92

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered as an SVG in D3.js demonstrates basic DOM manipulation and animation. The face is composed of simple shapes—a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses `d3.select` and `d3.append` to build the hierarchy, with a `transition` animating the eyebrows upward and back over two timed intervals. The example shows how D3 can drive SVG element attributes and transformations.

Ssoniyaa-dv

96% match