Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published1🌍 Public
SShivamsunderam
Last edited Oct 24, 2020
Created on Oct 24, 2020

This example constructs a smiling face out of simple D3 shapes, including circles for the eyes, rectangles for the eyebrows, and arcs for the mouth and nose, all centered within an SVG canvas. The design shows a composition of yellow, black, and green elements, with the eyebrows performing a gentle animated bounce using D3’s `transition()` method. Built with D3 v5 and SVG rendering, the code uses absolute positioning via `attr('transform', ...)` and the `arc()` API to define the curved paths for the facial features.

AI-generated description

Yifu's practice on making a smiley face with d3.js

Tutorial: https://www.youtube.com/watchv=_8V5o2UHG0E&t=1220s

Dec. 24, 2019

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

A D3.js animation constructs a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, and an arc path for the mouth. The left eyebrow rectangle performs two sequential transitions, moving upward then returning to its original position. The code uses D3's selection and arc APIs, appending shapes to an SVG canvas with a translated coordinate system.

Ssreen020
93% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a smiling face in SVG using D3.js, composing a yellow circle for the head, two black circles for eyes, rectangles for eyebrows, and an arc-based path for a mouth. The rendering approach relies on D3 selections and the `arc` generator from D3’s shape module. The right eyebrow animates upward and returns to its original position using chained `transition().duration()` calls over two seconds each, while all other elements remain static. The face is centered at (480,250) on a 960×500 SVG canvas.

Llamiyaa
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
92% match
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Wwinner106
92% match
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Wwinner106
92% match
Loading thumbnail…

Let's make a face

This example builds a smiling face from basic SVG shapes using D3.js v6. A yellow circle forms the head, with two eyes and a mouth drawn as a path using the `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition().duration(500)` calls. The code imports `select` and `arc` from D3, positions elements relative to a centered group, and uses SVG attributes like `cx`, `cy`, and `d` for layout.

Ffigment-tree
92% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a smiling face from basic SVG shapes. A yellow circle forms the head, while two smaller circles become the eyes. The code animates the eyebrows using chained `transition().duration()` calls, moving them up and then back down over two seconds. A mouth is drawn using the `arc()` generator from D3’s shape utilities, creating a curved path. All elements are positioned relative to the SVG center using a `g` transform, and the entire composition is rendered as static SVG with animated attributes.

MMichał Szumnarski
92% match
Loading thumbnail…

Lets make a face

A smiling cartoon face is drawn with D3.js, composed of a yellow circle for the head, two eyes, eyebrows, and a mouth shaped as an arc. The face is centered on an SVG canvas, with the mouth created using the `d3.arc` function and the layout arranged through nested SVG groups. A simple animation is applied via the D3 `transition` method, which moves the eyebrows down and then back up over two seconds each way, creating a subtle expressive effect. The example demonstrates basic SVG composition and state animation without external data sources.

Uumihito
92% match