Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
FFelipe Maion
Last edited Dec 10, 2020
Created on Dec 8, 2020

A bright yellow smiley face is drawn centered in an SVG canvas using D3.js, with circles for the face and eyes, and arc-generated paths for the eyebrows and mouth. The animation begins by moving both eyebrows upward and down via chained `transition()` calls, followed by a scale-up and reset of the eyes using the same method. The code imports `select` and `arc` from D3 v5, defines SVG attributes with `attr`, and uses a JavaScript Promise to sequence the eyebrow lift before the eye scaling, demonstrating fundamental DOM manipulation and data-driven vis

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

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG face is built using D3 selections to append a circle for the head, circles for the eyes, and an arc-generated path for the mouth. Two rectangles form the eyebrows, with the right eyebrow moving upward via a `transition` over two seconds. The code imports `select` and `arc` from the D3 v5 library and reads dimensions from the SVG attributes.

Iiascchwen
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated mouth—are positioned using translation transforms. The code imports `select` and `arc` from D3 v5 and uses chained `transition().duration()` calls to move the eyebrow group upward and back, creating a repeating eyebrow-lift animation. The face is centered within a 960×500 SVG viewport.

LLucian-jw
96% match