Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Ggonghewan
Last edited Jan 17, 2020
Created on Jan 17, 2020

A yellow smiley face with moving eyebrows demonstrates fundamental D3.js DOM manipulation and SVG rendering. The face is built using D3 selections to append circles, rectangles, and an arc-generated mouth path onto an SVG canvas. Eyebrow animation is achieved through chained `transition().duration()` calls that shift the eyebrow group's transform attribute up and down over two-second intervals. The code imports `select` and `arc` from the D3 v5 library, with fixed pixel values controlling facial feature positions and dimensions.

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

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

AA1L9E9X9
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates core D3.js DOM manipulation. The code uses d3-selection to append SVG circles for the eyes and face, rects for the eyebrows, and a d3-shape arc for the mouth. Chained transitions animate the eyebrow positions over two seconds each, lifting the left brow upward while the right brow returns to its original spot, all within a fixed 960x500 SVG canvas.

RRiley Jamel Green
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates core D3.js DOM manipulation. The code uses d3-selection to append SVG circles for the eyes and face, rects for the eyebrows, and a d3-shape arc for the mouth. Chained transitions animate the eyebrow positions over two seconds each, lifting the left brow upward while the right brow returns to its original spot, all within a fixed 960x500 SVG canvas.

RRiley Jamel Green
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates basic D3.js DOM manipulation. The code uses D3 v5’s `select` and `arc` to draw SVG circles, rectangles, and a mouth path on a fixed 960×500 canvas. Eyebrow rectangles transition upward and back down over two seconds via chained `transition().duration(2000)` calls. The face is centered using an SVG `g` group with transformations, while eye and eyebrow positions are calculated from fixed numeric offsets. No external data is loaded; all shapes are generated programmatically.

PPotikorn
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 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
97% match