Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Sep 30, 2022

Created on Sep 30, 2022

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiling face and animating its eyebrows. The code appends SVG shapes—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—using D3’s `select` and `append` methods. The eyebrows move via chained `transition()` calls with a two-second duration, shifting their vertical position and then returning. The scene is rendered in an SVG canvas with a 960 by 500 coordinate space, centered through a transform.

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!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face from scratch. The code constructs the face using basic SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` generator for the mouth—all centered within an SVG canvas. A sequential `transition` on the eyebrows group animates the eyebrows upward and back over two seconds each way, creating a simple expressive motion. The script uses D3’s `select` and `append` to build the hierarchical structure, and the animation relies on D3’s built-in transition system.

Ddarshue

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by constructing a smiling face from SVG primitives and animating its eyebrows. Built with D3 v5, the code uses the `select` API to target the SVG element and `append` to create circles, rectangles, and a path for the mouth. The eyebrows are animated using chained `transition().duration()` calls, moving them vertically over two seconds before returning to their original position, with the mouth drawn via D3's `arc` function to create a crescent shape.

LLohithBlaze

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example constructs a smiley face out of SVG shapes and animates its eyebrows. Using D3.js v5, the code selects the SVG canvas, appends groups and primitive shapes like circles, rectangles, and an arc-based mouth, and positions them with transform attributes. The eyebrows are rectangles that use chained `transition` calls to move up and down over 2-second intervals. This demonstrates fundamental DOM manipulation and basic animation, where the underlying data is the hardcoded positional values and dimensions for each facial feature.

KKoustubhK2618

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

Vveagy

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face drawn with SVG circles, rectangles, and an arc for the mouth. Its eyebrows bounce up and down repeatedly in an animated loop. The code demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and chained `transition().duration()` calls to animate the eyebrow group’s transform. The face uses hardcoded dimensions, no external data, and renders entirely through SVG primitives within a 960x500 canvas.

Ttsinghkhalsa

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built entirely with D3.js that animates its eyebrows up and down. It demonstrates fundamental DOM manipulation by constructing SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas. The animation uses D3’s `transition()` method to move the eyebrow group between two vertical positions over two-second intervals. The code relies on D3 v5’s `select`, `arc`, and `transition` APIs to create the static face and its looping eyebrow motion.

BBraja Gopal Das

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

JJun Yi | Dylan

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Vveagy

95% match