Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Vveagy
Last edited Aug 29, 2018
Created on Aug 29, 2018

This example demonstrates how D3.js can animate a smiley face by manipulating SVG shapes, specifically moving its eyebrows up and down over a four-second loop. The code builds the face using `d3.select` to append SVG elements like circles, rectangles, and a path for the mouth, with an arc generator defining the mouth’s curve. The eyebrows use chained `transition().duration(2000)` calls to shift their vertical position, creating the facial animation. The entire face is centered within an SVG canvas using a `<g>` element, with hardcoded layout constants for eye spacing 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!

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

Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring expressive eyebrows that animate up and down over a two-second cycle. The face is constructed by manipulating SVG elements, including circles for the eyes and a path for the mouth, all grouped and positioned via translation transforms. The animation is driven by a chained sequence of `transition().duration()` calls, which move the eyebrows group along the y-axis. The code imports `select` and `arc` from D3, using the latter to generate the mouth’s arc path geometry.

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

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face entirely from SVG primitives, with eyebrows that repeatedly rise and fall. The code constructs the face by appending circles for the eyes and a path generated with `d3.arc` for the mouth onto a centered `<g>` group. It uses D3 selections and the `transition.attrTween`-like chained `.transition().duration()` calls to animate the eyebrow group’s vertical position over two seconds, creating a looping expression change. The implementation relies on D3 v5’s select, arc, and transition APIs.

MMartin Lord
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example constructs a smiley face using SVG primitives in D3.js, then animates its eyebrows in a looping motion. The face is built by appending circles, rectangles, and a path to an SVG group, with the mouth created using the `d3.arc` shape generator. Eyebrows are rectangles that move vertically via chained `transition().duration(2000)` calls to `attr('transform')`, creating a bouncing effect. The code demonstrates basic DOM manipulation and animation with D3’s selection and transition APIs.

Jjesramyep1263
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, with eyebrows that move up and down over time. It shows fundamental DOM manipulation by selecting SVG elements and appending shapes like circles, rectangles, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and chained `transition.attr` calls to animate the eyebrow group’s vertical position. The face is drawn entirely with SVG, centered in a 960×500 viewport, and the animation runs continuously without external data.

Lliunaiming
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, with eyebrows that move up and down over time. It shows fundamental DOM manipulation by selecting SVG elements and appending shapes like circles, rectangles, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and chained `transition.attr` calls to animate the eyebrow group’s vertical position. The face is drawn entirely with SVG, centered in a 960×500 viewport, and the animation runs continuously without external data.

Lliunaiming
96% match