Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTanu001ux
Last edited May 7, 2021
Created on May 7, 2021

This example shows a stylized smiley face built entirely with D3.js v5, featuring a yellow circle head, two eyes, and an animated mouth. The eyebrows move up and down repeatedly through chained `transition().duration()` calls on a group element. The code uses D3’s `select`, `arc`, and `attr` methods to construct SVG shapes, with the mouth defined by an arc generator using inner and outer radii and angle parameters. No external data source is involved; the visualization is purely generated from hardcoded dimensions and positions.

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 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
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 with two eyes, moving eyebrows, and a curved mouth, rendered as SVG shapes. The eyebrows shift upward and then return to their original position using chained `transition().duration()` calls. The code builds the face with D3 selections and shape generators, including `select`, `arc`, and attribute setters like `.attr()`, positioning elements via `translate` transforms on a centered group. The face is drawn entirely through D3’s DOM manipulation, with no external data source.

SSUNAMLIMBU
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

YYUTONG FENG
96% match
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
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 example shows a stylized smiley face rendered as SVG, with animated eyebrows that move upward and then return to their original position. The face is constructed using D3.js v5 and fundamental DOM manipulation: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `d3.arc()` helper for the mouth. The eyebrows’ motion is driven by chained `transition()` calls with a specified duration, demonstrating the selection and chaining API.

VVKeerthika24
96% match
Loading thumbnail…

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

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

DDharanitharan-J
96% match