Skip to main content
SimilarExport ZIP
100%

Let's make a face with a d3.js

✓ Published0🌍 Public
Mmyoung1032
Last edited Jun 6, 2021
Created on Jun 6, 2021

A smiling face composed of SVG shapes is drawn with d3.js, featuring a yellow circular head, eyes, eyebrows, and a curved mouth. The eyebrows animate upward and back down using `transition.attr` on a `<g>` element. The code builds the face with d3 selections, `arc()` for the mouth path, and explicitly positioned ellipses and circles for the eyes, all rendered in an SVG canvas.

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

A smiling face is drawn with D3.js v5, featuring circular eyes, rectangular eyebrows, and an arc-shaped mouth on a filled circle head. The eyebrows animate upward and back down using chained `transition().duration()` calls, while all shapes are positioned relative to a centered group. The code uses `d3.select`, `d3.arc`, and SVG elements, rendering with a static yellow head and black outlines.

Tthespiraltree
96% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

GGeolffrey S Mena
96% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is constructed entirely from SVG shapes, with a yellow circular head, two dark eyes, eyebrows, and an arc-based mouth. The example demonstrates basic SVG composition and D3 selections, then animates the eyebrows by chaining `transition` calls to shift their vertical position. It uses D3 v5’s `select`, `arc`, and `attr` APIs to generate the mouth path and manage transform attributes. A centered `<g>` group positions all features, with fixed pixel constants controlling eye spacing and offsets.

Iianleekq
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

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

Let's make a face with D3.js

A smiling yellow face is drawn in an SVG canvas using D3.js, with eyes, eyebrows, and a mouth positioned relative to a centered group. Eyebrows animate upward and back down via chained `transition().duration()` calls, moving the group's transform attribute. The code uses `d3.select`, `d3.arc` for the mouth's shape, and explicit SVG `circle`, `rect`, and `path` elements. The face is styled with a light blue background and black strokes, all rendered dynamically from the viewport height and width.

GGabe Nascimento
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiling face is drawn entirely with D3.js SVG shapes, including a circular head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows and left eyebrow rectangles move up and sideways in a looping 2000-millisecond transition, while the mouth uses the d3.arc generator with specified inner and outer radii and angles. The code selects the SVG element, centers a group via translation, and applies chained transitions to animate the facial features.

PPetter-Smit
95% match