Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Sep 14, 2019

Created on Sep 14, 2019

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

A smiling yellow face is drawn in SVG with D3.js, featuring eyes and a mouth created from an arc path. The example demonstrates basic DOM manipulation and transitions as the eyebrows animate upward and back down over two seconds. Using d3.select, arc, and attr, the code builds the face from a circle, rectangles, and a path, while the transition method moves the eyebrow group between vertical offsets. The face is centered within a 960 by 500 SVG canvas using a translated group element.

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 smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

Nnicfavfar

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 smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger

96% match

Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes—a yellow circle, two eyes, and an arc-shaped mouth—bobs its rectangular eyebrows up and down in a repeating two-second animation. The D3.js code constructs the face using `d3.select` and `d3.arc`, then applies chained `transition().duration()` calls to animate the eyebrow group’s vertical position. Rendering occurs in an SVG canvas at 960 by 500 pixels, with all coordinates centered via a translated group.

RRafael Campos

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG demonstrates fundamental D3.js DOM manipulation and transitions. The code selects the SVG element, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth using `d3.arc`. Two eyebrow rectangles animate upward and back via chained `transition().duration(2000)` calls, shifting their parent group's transform attribute. The example uses D3 v5 and relies on `select` and `arc` from the d3 module.

JJepyagg

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

95% match