Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published0🌍 Public

Last edited Jul 14, 2019

Created on Jul 14, 2019

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

This example builds a simple smiling face using D3.js SVG primitives, starting with a yellow circle for the head, two circles for eyes, and an arc path for the mouth. A group of rectangular eyebrows transitions upward and back down over two seconds using chained `transition().duration(2000)` calls, creating a subtle animation. The face is centered by translating a parent `<g>` element to the SVG’s midpoint, with all positioning handled via explicit `attr` values for coordinates and dimensions. The implementation relies on D3’s `select`, `arc` generator, and transition API, rendering entirely in SVG.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

96% match

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face in SVG using D3.js v5, showing fundamental DOM manipulation with selections and SVG shape elements. It draws a yellow circle for the head, two eyes, eyebrows as rectangles, and a mouth created with `d3.arc()`. The animation uses `transition().duration()` to move the eyebrow group up and down repeatedly, demonstrating chained transitions over a two-second interval. The page is set up with a simple HTML structure and imports D3 via a CDN, with all elements positioned relative to the SVG center.

Mmirna981

95% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a stylized smiling face from basic SVG shapes using D3.js v5. It draws a yellow head circle, two eyes, and a mouth path created with the `d3.arc` generator. The animation uses chained `transition().duration()`.attr calls to make the eyebrows move up and down, creating a simple facial expression. The code demonstrates SVG rendering with D3’s selection and attribute manipulation APIs.

WWhitney Hung

95% match

Loading thumbnail…

Let's make a face with D3.js

WWhitney Hung

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.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiling face from SVG primitives—a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth—centered within an SVG. The code constructs the face using `select` and `append`, then animates the eyebrows upward and back down with chained `transition().duration(2000)` calls. It imports the `arc` helper from D3 v5 to generate the mouth path, and uses static attributes for sizing and positioning. The animation runs once on page load, showing a face whose eyebrows move without user interaction.

Ttianyilt

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