Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
LLaurentVuillon
Last edited Dec 25, 2019
Created on Dec 25, 2019

A smiley face composed of SVG shapes appears centered in the viewport. Its rectangular eyebrows animate upward and back down in a looping motion, while a curved mouth path follows the same transformation. The code uses D3.js v5 functions like `select`, `arc`, and chained `transition` calls to move elements. The example demonstrates fundamental DOM manipulation with SVG primitives, including circles for the head and eyes, rectangles for brows, and a path built from an arc generator.

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

Let's make a face with D3.js!

An animated smiley face demonstrates fundamental DOM manipulation and transitions with D3.js v5. The face consists of SVG shapes, including a circle, eyes, rectangular eyebrows, and a path-based mouth. The eyebrows move up and down using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, uses the `svg` selection to set up the coordinate system, and generates the mouth path with the `arc` API.

Vveagy
96% 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 fundamental D3.js DOM manipulation by using `select` to target SVG elements and `append` to build circles, rectangles, and a path arc for the mouth. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals. The face is centered on a 960-by-500 viewport, with all coordinates offset from the middle via a translation transform.

CCameron
96% 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
96% match
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
96% 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 rendered with D3.js demonstrates basic DOM manipulation and animation. The code uses D3 selections to append SVG circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. A two-stage `transition` moves the eyebrow group vertically over four seconds, creating an animated expression. The face is centered via SVG transforms, with all shapes drawn using D3's `select`, `append`, `attr`, and `transition` APIs.

BBrian Merchant
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built from SVG shapes, with eyebrows that animate in response to the viewer’s actions. The code demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to create the face’s elements. It relies on the `d3.arc` generator for the mouth and applies simple transitions to move the eyebrows. The page reads the client’s viewport dimensions to size the SVG canvas, and styling is handled via an external stylesheet.

DDifan Gu
95% match