Skip to main content
SimilarExport ZIP
100%

make face with D3.js

✓ Published1🌍 Public
SSuzie1022susu
Last edited Jan 9, 2023
Created on Jan 9, 2023

Built with D3.js v7, this example draws a smiling yellow face as an SVG graphic. The code constructs circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all positioned using SVG transforms. Animated transitions, using `transition().duration()`, move the eyebrows up and down over two seconds. The face is centered within a 960 by 500 pixel viewport, with the visualization rendered entirely through SVG elements.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
92% match
Loading thumbnail…

Make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js v5. The face uses a yellow circle, black-outlined eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition` repeatedly raises and lowers the eyebrows over two-second intervals. The code imports `select` and `arc` from the D3 library, positions elements with SVG attributes, and animates the eyebrow group via `transition.attr`. The example demonstrates basic SVG composition and D3 transitions on a 960×500 canvas.

TTapiwa Lason
92% match
Loading thumbnail…

Let's Make a face with D3.js!

This example uses D3.js to draw a smiling face entirely with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The code employs ES6 imports, selections, and attribute setters to construct the face, centered within a 960x500 SVG. The eyebrows feature an animated loop using chained `transition` calls with `.duration(2000)`, moving them up and down over two seconds each way. The visualization demonstrates basic SVG composition and D3’s transition API for simple motion.

Rreo440
92% 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 draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js to build its geometry, including a yellow circle, two eyes, a mouth via `d3.arc`, and rectangular eyebrows. A `transition` on the eyebrow group animates their vertical position over two seconds, moving them up and down repeatedly. The code employs `d3.select`, `d3.scaleLinear`, and attribute setters to construct the scene, with a fixed SVG canvas sized 960 by 500 pixels.

Ppanmenghan
92% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black-outlined features forms a smiling face. The D3.js code builds the face using SVG primitives: a circle for the head, two circles for eyes, and arcs from `d3.arc()` for eyebrows and a mouth. An animation sequence uses chained `transition()` calls with 1000-millisecond durations to repeatedly raise and lower the eyebrows, creating a winking or surprised expression. The example demonstrates basic SVG drawing and simple timeline-based animation in D3 v5.

Dddperdue
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face is drawn in SVG with D3.js, featuring eyes and a mouth created from an arc path. The example demonstrates basic DOM manipulation and transitions as the eyebrows animate upward and back down over two seconds. Using d3.select, arc, and attr, the code builds the face from a circle, rectangles, and a path, while the transition method moves the eyebrow group between vertical offsets. The face is centered within a 960 by 500 SVG canvas using a translated group element.

Nnawendusingh
92% match