Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Dec 28, 2019

Created on Dec 27, 2019

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

A smiling face is drawn with D3.js as a yellow circle, complete with eyes, a mouth, and eyebrows that animate by moving up and down. The code uses D3's selection and DOM manipulation methods to build the SVG structure, while `transition().duration(1000)` creates the repeating eyebrow motion. The face is constructed using basic SVG shapes like `circle` for the head and eyes, a `path` for the mouth via D3's arc generator, and `line` elements for the eyebrows, all centered within an SVG canvas.

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 as SVG shapes in D3.js v5 shows animated eyebrow movements. The code builds the face using `d3.select`, `d3.append`, and `d3.arc` to create a yellow circle head, two eyes, and a mouth. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, each lasting two seconds. The example demonstrates fundamental DOM manipulation with D3's imperative API, drawing all elements on a 960×500 SVG canvas.

YYuShuenWang

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and animated eyebrows that move up and down in a repeating transition. The SVG elements are positioned using D3's `select` and `append`, with the face centered via a `g` transform. The eyebrows animate through chained `transition` calls, and the mouth uses the `arc` generator from D3's shape module. The code demonstrates fundamental DOM manipulation and SVG rendering, using d3.v5 to build and animate the face entirely in the browser.

Sshahbaj1999

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

Aarg04

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3

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 v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely in SVG using D3.js v5. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and building the face from basic shapes like circles and rectangles. D3 transitions move a shared eyebrow group up and down over two one-second intervals, while a mouth path is created using the `d3.arc` generator with specified inner and outer radii and smile angles.

Mmoha0902

95% match