Let's Make a face with D3 !

100%

Let's Make a face with D3 !

✓ Published0🌍 Public

Last edited Apr 8, 2020

Created on Apr 8, 2020

This example animates a simple smiling face built entirely with D3 shapes. The face consists of a yellow circle, two black eyes, and a curved mouth created using the `d3.arc` path generator. Eyebrows animate with two sequential `transition().duration()` calls, first moving upward and then rotating via `attr('transform', rotate())`, while the face is centered using SVG group transformations. The code uses D3 v5 selections and transitions on SVG elements, with all coordinates computed from the SVG’s height and width attributes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

Ssourcebox-bug

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiling face out of basic SVG shapes: a yellow circle for the head, two eyes, and a mouth created with the `arc` generator. Eyebrows animate by repeatedly shifting their vertical position via chained `transition().duration(2000)` calls on a group element. The code relies on D3 selections and `select`, with dimensions read from the SVG attributes. The simple, playful design demonstrates how D3 can drive both static shape construction and time-based transformations in an SVG scene.

Cchristoshanes

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu

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

95% match

Loading thumbnail…

Let's Make a face with D3 !

A yellow circular face with black eyes, eyebrows, and an arc-shaped mouth is drawn in SVG using D3 v5. The code constructs shapes with `d3.select` and `d3.arc`, then animates the eyebrows via chained `transition.attr` calls that move them up and down over two-second intervals. The face is centered by translating a group element, and all geometry uses hardcoded pixel values.

CCao,Zhuo

95% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a smiling face from basic SVG shapes. A yellow circle forms the head, while two smaller circles become the eyes. The code animates the eyebrows using chained `transition().duration()` calls, moving them up and then back down over two seconds. A mouth is drawn using the `arc()` generator from D3’s shape utilities, creating a curved path. All elements are positioned relative to the SVG center using a `g` transform, and the entire composition is rendered as static SVG with animated attributes.

MMichał Szumnarski

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

95% match