Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDharanitharan-J
Last edited Sep 21, 2023
Created on Sep 21, 2023

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.

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

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

This example demonstrates fundamental D3.js DOM manipulation by constructing a yellow smiley face from SVG shapes. The code uses the `arc` generator for the mouth and appends circles for the eyes. Two rectangular eyebrows repeatedly animate upward and downward using chained `transition` calls, each lasting two seconds. The visualization renders entirely in SVG via D3 v5, with the face centered in a 960×500 viewport.

VVighnesh Gawad
97% 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
97% match
Loading thumbnail…

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

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.

TTanu001ux
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is constructed with SVG circles, rectangles, and an arc-generated mouth, all positioned relative to the center of the viewport. The eyebrows use chained `transition().duration()` calls to move vertically and back, creating a blinking effect. The code imports `select` and `arc` from D3 v5 and builds the visualization entirely through SVG attributes.

CCharlene Ong
96% match
Loading thumbnail…

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

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo
96% match