Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Aug 12, 2020

Created on Aug 12, 2020

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

This example uses D3.js to draw a cartoon smiley face as an SVG, then animates its eyebrows with a looping transition. The face is composed of circles and rectangular eyebrows that move up and down over two seconds using D3’s `transition` API. The code demonstrates fundamental DOM selection and element creation via `select` and `append`, while the mouth is formed using the `arc` shape generator. The animation runs continuously, showing basic attribute manipulation and chained transitions.

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 smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to demonstrate fundamental DOM manipulation by building a stylized smiley face from SVG shapes. The face features animated eyebrows that move up and down via chained `transition().duration()` calls on a group element, creating a dynamic expression. The code explicitly constructs each facial component—circle for the face, two eye circles, rectangular eyebrows, and an arc-based mouth path—using D3’s `select`, `append`, and `attr` methods within an SVG canvas. The `arc()` generator calculates the mouth’s path with specified inner and outer radii.

Vveagy

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

Vveagy

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example constructs a smiley face using SVG primitives in D3.js, then animates its eyebrows in a looping motion. The face is built by appending circles, rectangles, and a path to an SVG group, with the mouth created using the `d3.arc` shape generator. Eyebrows are rectangles that move vertically via chained `transition().duration(2000)` calls to `attr('transform')`, creating a bouncing effect. The code demonstrates basic DOM manipulation and animation with D3’s selection and transition APIs.

Jjesramyep1263

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

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!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates basic DOM manipulation and transitions in D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that shift the group's `transform` attribute up and down. The face is centered via an SVG group with translated coordinates, and all styling is handled through inline attributes and a linked stylesheet.

Iidwann-eng

94% match