Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Let's make a face with D3.js!

✓ Published1🌍 Public
PPriya Tiwari
Last edited Oct 3, 2023
Created on Oct 3, 2023

A yellow smiley face is drawn in SVG, with circular eyes and rectangular eyebrows that animate vertically. The eyebrows move up and down in a repeating loop using D3’s `transition()` method, while the mouth is created with the `d3.arc` shape generator. The code selects SVG elements with `d3.select`, uses `d3.arc` for the path, and animates attributes via chained transitions. Drawing is done over two seconds per movement, with the face centered in a 960×500 viewport.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

PPriya Tiwari
97% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula
96% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Ssnehareddygurram
96% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face made of SVG shapes is centered on a yellow background. The face's eyebrows perform a repetitive up-and-down motion, creating a brief animation. Constructed with D3.js v5, the code uses `select`, `append`, and `attr` to build the SVG elements, while chained `transition().duration(2000)` calls animate the eyebrow group's vertical position. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges.

PPriya Tiwari
96% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js!

A D3.js animation shows a smiley face with a yellow head, eyes, a mouth, and rectangular eyebrows that move up and down in a repeating cycle. The face is built by manipulating SVG shapes, including circles for the head and eyes, a path for the mouth, and rectangles for the eyebrows. The code uses d3.select and d3.arc, and iterates transitions with the .transition() method to animate the eyebrows over two-second intervals. The background is set to black via d3.select("body").style().

SSANEEM MOHAMMAD
96% match
Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, lines, and a quadratic path renders in a 500×500 viewport, with its eyebrows, mouth, nose, and face color all animating independently. The D3.js v5 code selects the root `svg` element and appends shapes directly, then uses chained `transition()` calls to move eyebrows and nose, remap the mouth path, blink eyes via radius changes, and cycle face fill colors through a fixed palette. A recursive `on('end')` callback drives each looping animation, with eye blinks triggered by `setTimeout` for irregular timing.

SSiva Srinivasa Reddy Yakkanti
96% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Let's make a face with D3.js!

A smiley face drawn with SVG elements animates its eyebrows upward and downward in a repeating two-second cycle. The code builds the face by appending circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth using D3.js v5. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on a group element, which alternately shifts its `transform` attribute. The example demonstrates fundamental DOM manipulation and selection with `d3.select` and `d3.append`.

PPriya Tiwari
96% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, centered within a 960-by-450 canvas, with eyes, a mouth, and eyebrows that animate upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3.js v5, building the face with `d3.select`, `append`, and the `d3.arc` shape generator for the mouth. The eyebrows’ movement is driven by chained `transition().duration(2000)` calls that change the group’s `transform` attribute. All shapes are plain SVG elements, and the animation relies entirely on D3’s transition system.

SSANEEM MOHAMMAD
96% match