Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
SSun-XH
Last edited Nov 14, 2021
Created on Oct 25, 2021

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.

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 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
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
95% 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
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
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!

This example constructs a smiley face out of SVG shapes and animates its eyebrows. Using D3.js v5, the code selects the SVG canvas, appends groups and primitive shapes like circles, rectangles, and an arc-based mouth, and positions them with transform attributes. The eyebrows are rectangles that use chained `transition` calls to move up and down over 2-second intervals. This demonstrates fundamental DOM manipulation and basic animation, where the underlying data is the hardcoded positional values and dimensions for each facial feature.

KKoustubhK2618
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face in SVG. The code builds the face from basic shapes—a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth—and demonstrates D3's DOM manipulation and transition API. The eyebrows animate by moving up and down via chained `transition().duration(2000)` calls on the SVG group containing the rectangles, shifting the group's transform attribute. The visualization uses `d3.select` and `d3.arc` to generate the mouth path, with all elements centered in a 960-by-500 canvas.

Ssathesujit
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 with SVG elements. The face, eyes, and eyebrows are drawn using basic `circle` and `rect` shapes, while the mouth is created with the `arc` generator. Eyebrows move up and down through a recursive `transition` with `duration` and `on("end")` callbacks, and the mouth also transitions between arc shapes. The code demonstrates fundamental DOM manipulation and chained transitions with D3's selection API.

DDavid Sjoberg
95% match