Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
DDimitarDraganov
Last edited Jul 5, 2020
Created on Jul 5, 2020

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.

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 an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

JJun Yi | Dylan
97% 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
97% 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
96% 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 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!

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!

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

Let's make a face with D3.js!

This example uses D3.js to construct a smiley face from basic SVG shapes, including circles for the eyes, rectangles for the eyebrows, and arc-generated paths for the mouth and nose. The code demonstrates fundamental DOM manipulation by selecting an SVG element and appending grouped elements with explicit coordinate transforms. Animated behavior is implemented through chained `transition` calls, moving the eyebrow group upward and back down over two one-second intervals. The visualization relies on D3’s `select`, `arc`, and transition APIs to show how static shape creation and simple attribute animation work together.

MMEHMETHAN YAGCI
96% match