Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
SSadafNaseem
Last edited Aug 15, 2021
Created on Aug 13, 2021

This visualization demonstrates a yellow smiley face built with D3.js, featuring two eyes and a curved mouth created using an SVG path with the d3.arc() API. The face’s eyebrows, rendered as rectangles, move vertically through a chained transition that animates their transform attribute up and down over two-second intervals. The code uses d3.select and d3.arc from the D3 v5 library to construct the SVG elements, with eyebrows shifting smoothly via transition.duration, while the static face parts remain fixed on a 960×500 canvas.

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 Let's make a face with D3.js!

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
97% match
Loading thumbnail…

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

This example draws a yellow smiley face with D3.js, featuring two circular eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then return to their original position over two sequential two-second transitions. The visualization uses D3 v5’s `select`, `append`, and `transition` methods to manipulate SVG elements, with coordinates computed from the viewport dimensions. The mouth is generated using the `arc` generator with specified inner and outer radii and angle values.

DDharanitharan-J
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built entirely with D3.js v5, featuring two eyes and a curved mouth drawn with an arc path. The face’s eyebrows, rendered as rectangles, animate up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 selections to append SVG elements, `d3.arc` for the mouth, and attribute manipulation to position the facial features relative to the SVG's center. All rendering occurs in an inline SVG with CSS hiding page overflow.

JJenifer Vivar
96% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

Ssabaliaqat786
96% match
Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The eyebrows animate upward and then back down over four seconds using chained `transition` calls on a group element. The code constructs the face with D3 selections, `arc` for the mouth path, and transitions that modify the `transform` attribute of the eyebrow group.

SSadafNaseem
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

SSnapika
96% match
Loading thumbnail…

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

This example shows a yellow smiley face centered in an SVG canvas, with two eyes and a mouth formed by an arc path, while its eyebrows animate by moving upward and then back down. Built with D3.js v5, the code uses `d3.select`, `svg.append`, and `.attr` to construct the face, and `transition().duration(2000)` to create the eyebrow motion. The face is drawn using SVG shapes, including circles for the eyes and a path generated by `d3.arc` for the mouth, with dimensions fixed to a 960×500 viewport.

JJoshuoYang
96% match
Loading thumbnail…

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

This example shows a smiley face built with D3.js, featuring a yellow circle head, two eyes, and an arc-based mouth. The eyebrows, rendered as rectangles, animate upward and then back down in a looping motion using chained `transition()` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs to manipulate SVG elements, positioning the face components relative to the center of an 960×500 SVG canvas. It demonstrates fundamental DOM manipulation and data-driven animation without external data sources.

MMuhammadAtifHussain
96% match