Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Vveagy
Last edited Oct 31, 2018
Created on Aug 29, 2018

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.

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!

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

Let's make a face with D3.js!

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.

LLaurentVuillon
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation. The SVG face has blue circular head, green eyes, and an arc-based mouth, with rectangular eyebrows that animate up and down using chained `transition` calls. The code uses d3.select to target the SVG, d3.arc to generate the mouth path, and attribute methods like `.attr` to position elements. Eyebrow movement is achieved through sequential `.transition().duration()` operations that translate the eyebrow group vertically.

DDaniel Piqué
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation using D3.js by creating a smiley face with animated eyebrows. The face is drawn with SVG shapes, including circles for the eyes and a path for the mouth, all positioned using D3's `select` and `append` methods. A `g` element transforms to center the face, while the eyebrows move up and down using chained `transition` calls over two seconds each, showing how D3 can animate attribute changes. The code uses D3 v5 and the `arc` shape generator for the mouth’s curved path.

CCurran Kelleher
96% match