Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
VVito
Last edited Nov 25, 2019
Created on Nov 25, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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 for the head, black circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and positioning shapes with the `attr` method. Eyebrows animate by using chained `transition().duration(2000)` calls to move their group vertically, first upward and then back to the original position. The example highlights D3’s `select` and `arc` APIs for creating and transforming visual elements.

QQiushi
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!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with basic SVG shapes in D3.js, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows animate vertically in a looping transition using `transition()` and `attr()` to move a rectangle group, demonstrating fundamental DOM manipulation with `d3.select` and `d3.arc`. The code uses D3 v5 and renders entirely in SVG, with the face centered using SVG transform attributes.

Nnvelden
96% 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
96% 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
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js version 5 to construct a yellow smiley face with eyes, eyebrows, and a mouth directly in an SVG. It demonstrates fundamental DOM manipulation by selecting elements, appending shapes, and applying attributes. The code uses `d3.select` and `d3.arc` to generate the mouth path, while a two-stage `transition()` chain animates the eyebrows upward and then back to their original position over 4 seconds.

Eevesshaw
96% match