Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published3🌍 Public
ZZhenxiang Wang
Last edited Feb 6, 2020
Created on Feb 5, 2020

A yellow smiley face is drawn with D3.js, featuring a circular head, two eyes, and an arc-shaped mouth. The face’s eyebrows animate by moving upward and then returning to their original position over two sequential transitions. The visualization uses D3 v5’s `select`, `arc`, and `transition` APIs to manipulate SVG elements directly in the DOM, with the face centered via a translated group and rendered on a 960x500 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!

A yellow smiley face is drawn with D3.js, featuring a circular head, two eyes, and an arc-shaped mouth. The face’s eyebrows animate by moving upward and then returning to their original position over two sequential transitions. The visualization uses D3 v5’s `select`, `arc`, and `transition` APIs to manipulate SVG elements directly in the DOM, with the face centered via a translated group and rendered on a 960x500 canvas.

ZZhenxiang Wang
100% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js using SVG shapes, including circles for the eyes and an arc for the mouth. The eyebrows, rendered as rectangles, animate up and down in a repeating two-second cycle via chained `transition()` calls. The visualization demonstrates fundamental DOM manipulation with D3 selections and the `arc` generator, using a static dataset defined inline. The face is centered on a 960×500 SVG canvas with the body constrained to no margins or overflow.

BblakeCS
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a looping transition. The visualization demonstrates fundamental DOM manipulation by appending and transforming SVG shapes (`circle`, `rect`, `path`) within grouped elements (`g`), using D3 v5’s selection and transition APIs. The face is centered via a translated group, and the mouth is generated with D3’s `arc` shape helper, while the eyebrow motion relies on chained `.transition().duration()` calls.

Ccollv004
96% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js draws a yellow smiley face as a scalable SVG, centered in a 960×500 canvas. The face’s circular head, eyes, eyebrows, and arcing mouth are built by appending SVG primitives—`circle`, `rect`, and `path`—to a group. The example demonstrates core DOM manipulation with `d3.select` and `append`, while a chained `transition().duration(2000)` sequence animates the eyebrows, moving them up and down over four seconds. The mouth uses the `d3.arc` shape generator with specified inner and outer radii and angle ranges.

CChetan Hebsur
96% match
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 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 with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3 selections, with a circular head, two eyes, eyebrows, and a mouth created from an arc path. The face demonstrates D3 transitions by animating the eyebrow group upward and then back down over repeated 2-second intervals. The code uses `d3.select` and `d3.arc` from D3 v5, with SVG elements appended and styled via attributes for positioning and fill.

Kkwanwoo100
95% match