Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Dec 11, 2019

Created on Dec 11, 2019

Forked from Let's make a face with D3.js!

A D3.js visualization assembles a smiley face from SVG shapes, including a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth. The code demonstrates fundamental DOM manipulation by building each facial feature through chained `attr` and `append` calls. Using `d3.select`, `d3.transition`, and the `d3.arc` path generator, the eyebrows animate over four seconds, alternately shifting downward and returning, while the static features remain unchanged. The SVG canvas is 960 by 500 pixels.

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 in an SVG canvas using D3.js v5, with select and arc methods constructing the head, eyes, and mouth. The eyebrows, rendered as rectangles, animate upward and back down over two seconds via chained transition().duration() calls, demonstrating staged DOM updates. The face is centered using an SVG group with a translate transform, and the mouth is generated from an arc path with specified inner and outer radii.

Ssam-leb

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG, demonstrating fundamental D3.js DOM manipulation. The code selects the SVG, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth path. Using D3's `transition()` method, the eyebrow group moves vertically over four seconds, creating a blinking-like effect. The example relies on D3 v5, importing `select` and `arc` from the main bundle, with coordinates based on the SVG's dimensions.

Ssam-leb

95% 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

95% 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

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous

95% 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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is rendered as SVG shapes within a 960×500 viewport. Yellow circles form the head and eyes, while an arc path creates the mouth. The eyebrows, drawn as rectangles, animate automatically, moving upward and returning to their original position over a two-second cycle. The code demonstrates fundamental DOM manipulation using D3’s `select`, `append`, `attr`, and `transition` APIs.

SSagar Malviya

95% 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

95% match