Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published3🌍 Public

Last edited Apr 10, 2020

Created on Apr 9, 2020

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

A yellow circle becomes a smiley face as D3.js SVG drawing primitives add eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate by chaining two `transition().duration()` calls that translate their group down and back up over four seconds. The example demonstrates fundamental DOM manipulation via `select` and `append`, using D3's `arc` helper to generate the mouth path.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG primitives, complete with eyes, eyebrows, and a mouth. The eyebrows animate up and down using chained `transition().duration()` calls, shifting the eyebrow group’s `transform` attribute over two seconds. The code uses `d3.select` and `d3.arc` from the D3 v7 library, setting positions via `attr` and leveraging SVG circles, rectangles, and a path for the arc-based mouth.

黃黃歆善

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, including a circle head, two eyes, and an arc-based mouth, all centered via a transformed group. D3.js v5 selections append and style these elements, while a chained `transition` with `duration` settings animates the entire eyebrow group upward and then back down, making the expression shift. The example highlights basic DOM manipulation and transition timing with `select` and `arc`.

MMartin Lord

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn onto an SVG canvas using D3 selections, with circles for the eyes, rectangles for the eyebrows, and a D3 arc generator for the mouth. The eyebrows rise and lower via chained `transition` calls that animate the `transform` attribute over two seconds each. The example demonstrates fundamental DOM manipulation with `d3.select` and `append`, plus D3 v5’s modular imports for `select` and `arc`.

AAlec Burch

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, using circles for the eyes and an arc-generated path for the mouth. The eyebrows are rectangles that animate upward and back down via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with `d3.select`, `d3.arc`, and SVG attribute binding, with all geometry positioned relative to the viewport center.

Ppxdu

96% match