Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published1🌍 Public

Last edited Mar 29, 2020

Created on Mar 27, 2020

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

This example shows a yellow smiley face drawn with SVG shapes, where the eyebrows repeatedly rise and lower in a looping two-second animation. The face is constructed using D3 selections to append a circle, two eye circles, two rectangular eyebrows, and a mouth path generated with the `arc` helper. The animation is implemented by chaining `transition().duration(2000)` calls on the eyebrows group, toggling its vertical transform. All geometry is positioned relative to the center of the SVG using a translated group.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Let' make a face with D3.js

This example shows a yellow smiley face built with D3.js v5 and React, rendered as animated SVG. The code uses D3 selections and the `arc` generator to draw the face, circles for eyes, and rectangles for eyebrows. A chained `transition().duration(2000)` animation moves the eyebrows up and down, while the mouth is an arc path. The face is centered using SVG transforms, with all shapes positioned relative to the viewport dimensions.

Kkokotchr

96% match

Loading thumbnail…

Let's make a face with D3.js

A smiling face made of SVG shapes is drawn on a yellow circle, with eyes, eyebrows, and a mouth defined by D3.js selections and the `arc` generator. The eyebrows animate vertically via chained `transition().duration(2000)` calls, shifting down and then returning. The code imports `select` and `arc` from D3 v5, positions elements using `attr` with computed coordinates, and renders in a React-based HTML page with an SVG canvas.

JJaKokosz

95% match

Loading thumbnail…

Let's make a face with D3.js

This example shows a simple yellow smiley face built entirely with SVG shapes, with eyebrows that animate up and down to give the face a surprised expression. The code uses D3.js v4 selection methods to create circles for the face, eyes, and pupils, rectangles for the eyebrows, and a D3 arc generator to draw the mouth path. Transitions animate the eyebrow group’s transform attribute over two seconds, creating a repeated up-and-down motion. The face is centered using an SVG group translation based on the viewport dimensions.

KKarkG

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43

95% match