Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Jjoaquinsantini
Last edited Apr 8, 2020
Created on Apr 7, 2020

This example builds a smiling face out of SVG shapes using D3.js v5. It draws a yellow circle for the head, two dark eyes, and a mouth created with D3’s `arc` generator. The animation moves the eyebrows up and down repeatedly via `transition.attr()`, which updates their group’s `transform` over two-second intervals. All rendering uses SVG elements appended to an empty `<svg>` container.

AI-generated description
MIT Licensed

Similar vizzes

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

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

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!

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 !

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.

CCao,Zhuo
94% 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 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
94% 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
94% match