01. face with D3.js

100%

01. face with D3.js

✓ Published0🌍 Public

Last edited Aug 8, 2021

Created on Aug 8, 2021

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

A yellow smiley face drawn with SVG circles, rectangles, and an arc path is centered in the viewport. D3.js selections append the facial features, while a chained `transition` with a two-second duration repeatedly moves the eyebrow group up and down. The code uses D3 v5’s `select`, `arc`, and `attr` to construct the face from hardcoded dimensions, demonstrating basic DOM manipulation and animation without external data.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

a_face_withD3

A yellow smiley face with moving eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG circles, rectangles, and an arc-generated mouth, centered within a 960×500 viewport. The eyebrows animate vertically via chained `transition().duration()` calls, shifting down 50 pixels and back over two seconds. The code imports `select` and `arc` from D3, using data-driven attributes to position facial features relative to the canvas.

WWhoIN Lee

93% match

Loading thumbnail…

face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face using basic shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rectangle elements that move up and down using chained `transition` calls, each lasting three seconds. The example relies on D3 v5’s `select`, `arc`, and transition methods, rendering in SVG with only a script and stylesheet, without external data sources.

AArthurFJ

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes—a circle for the head, two circles for eyes, and a path generated by the arc function for the mouth—appears centered in a 960×500 viewport. The code imports select and arc from D3 v5, using SVG groups to position features. The eyebrows, rendered as rectangles, animate by moving up and down through chained transition().duration() calls, while the static face elements remain fixed.

Ssemopz

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

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

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

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

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

93% match