Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published4🌍 Public
JJoachim Klug
Last edited Sep 11, 2020
Created on Sep 11, 2020

A yellow smiley face is drawn in SVG, with circles for eyes, rectangles for eyebrows, and a path created using the d3.arc generator for the mouth. The face animates as the eyebrow group performs a transition.attr on its transform, moving up and down over two seconds in each direction. Built with D3 v6, the code uses select to target the SVG element and applies geometric attributes like cx, cy, r, and rotation transforms to compose the facial features.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js as an SVG, featuring circular eyes, rectangular eyebrows, and a mouth created using the D3 arc generator. The eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on the group containing them. The code imports `select` and `arc` from d3, uses an SVG canvas, and positions facial features relative to the viewport center.

Jjnpatel
96% match
Loading thumbnail…

Let's make a face with D3.js

This example shows a simple yellow smiley face built entirely with SVG shapes, with eyebrows that animate up and down to give the face a surprised expression. The code uses D3.js v4 selection methods to create circles for the face, eyes, and pupils, rectangles for the eyebrows, and a D3 arc generator to draw the mouth path. Transitions animate the eyebrow group’s transform attribute over two seconds, creating a repeated up-and-down motion. The face is centered using an SVG group translation based on the viewport dimensions.

KKarkG
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and a mouth created via `d3.arc` for the half-circle path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas. The eyebrows animate upward and back down over four seconds, using chained `transition().duration(2000)` calls that modify the group’s `transform` attribute. The example relies on D3 v5 selections and the `arc` generator to construct the facial features.

Ooabundes
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is built from SVG shapes, including circles for eyes and a mouth drawn as an arc path. The animation shows the eyebrows, two rectangles, moving upward and back down via chained `transition().duration()` calls. D3.js v5 selects the SVG element and manipulates attributes like `cx`, `r`, and `transform` using `select` and `append`. The code uses D3's `arc` generator to construct the mouth, and all positioning is centered within a 960×500 viewport.

MMichael Connors
96% match