Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Wwsupko
Last edited Apr 15, 2019
Created on Apr 15, 2019

This example builds a simple orange smiley face using D3.js v5 and SVG primitives, including circles, rectangles, and a path created with the `d3.arc` generator for the mouth. The face is centered via a group transform, with eyebrows animated upward and back down using chained `transition.attr` calls over two seconds each. The code explicitly sets dimensions from the SVG attributes and uses fixed pixel offsets for eye spacing and eyebrow placement, demonstrating basic SVG rendering and animation without external data.

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 demonstrates basic DOM manipulation with D3.js by building an animated smiley face from SVG shapes. It shows how to append and style circles for the face and eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows use chained `transition` calls to move up and down over two-second intervals, while the face is centered using a `g` element with a `translate` transform. The code imports `select` and `arc` from D3 and renders entirely in SVG.

DDimitarDraganov
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face in SVG using D3.js v5, constructing the head, eyes, eyebrows, and mouth from geometric primitives like `circle`, `rect`, and `d3.arc`. The face is centered via SVG transforms, with the eyebrows animated upward and back down using chained `transition().duration(2000)` calls on a group element. No external data is loaded; the visualization focuses on programmatic DOM manipulation and declarative animation within an SVG canvas.

SSun-XH
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a D3.js smiley face with animated eyebrows, built using SVG primitives like circles, rectangles, and an arc-based mouth. The face is centered via a translated group, and the eyebrows transition vertically in a repeating 2000-millisecond cycle using `transition.attr` on the group. The code leverages D3 v5’s `select`, `arc`, and chained transitions to manipulate DOM elements directly, with a static orange face and dark eyes defined by hardcoded coordinates.

Aaruba-haroon
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face drawn with SVG circles, rectangles, and an arc for the mouth. Its eyebrows bounce up and down repeatedly in an animated loop. The code demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and chained `transition().duration()` calls to animate the eyebrow group’s transform. The face uses hardcoded dimensions, no external data, and renders entirely through SVG primitives within a 960x500 canvas.

Ttsinghkhalsa
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce up and down. Built with D3.js v5, the example constructs circles for the eyes and a path using the `arc` generator for the mouth, then applies chained `transition()` calls to shift the eyebrow group’s transform. The code demonstrates core DOM selection and manipulation via `d3.select`, plus attribute setting and SVG grouping, with no external data source.

BBrett Cunningham
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js (v5) to construct an animated smiley face entirely through SVG primitives and DOM manipulation. It shows how a face composed of a circle, eyes, eyebrows, and a mouth can be built and animated on an empty 960x500 SVG canvas. The code demonstrates chained `transition().duration()` calls to move the left eyebrow up and down over two seconds, while the right eyebrow is a rectangle and the mouth is an arc path generated with the `d3.arc` API. All elements are positioned through SVG attributes and groups, with no external data—the face is purely synthetic.

JJishen Xu
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by appending circles, rectangles, and a path to an SVG group, using `d3.arc` for the mouth. The eyebrows move via chained `transition().duration()` calls that shift their vertical position. The code uses `d3.select` and `d3.arc` from d3.v5, with all shapes positioned through SVG attributes and a centered group transform.

Ppvklplnn
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty
94% match