Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
PPYATA SHARAN
Last edited Feb 23, 2023
Created on Feb 23, 2023

This animated SVG example uses D3.js v5 to construct a stylized smiley face with a yellow circle, two eyes, a curved mouth, and moving eyebrows. The underlying code demonstrates DOM manipulation by building each facial feature through `d3.select` and `svg.append` methods. The eyebrows animate by chaining `d3.transition` calls, moving them upward and back over two-second intervals. The mouth shape is generated through `d3.arc` with specified inner and outer radii and angular ranges, while all coordinates are calculated relative to the visualization's center.

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 uses D3.js v5 to animate a smiley face built entirely from SVG shapes. It shows a yellow circle with two eyes, animated eyebrows that move up and down repeatedly, and a mouth drawn as an arc. The code manipulates the DOM directly, using `d3.select` to target the SVG element and `append` to add each facial feature. The eyebrow animation is achieved through chained `transition` calls that alternate the transform attribute, while the mouth’s curved path is generated with the `d3.arc` function.

RRamola Shishupal
97% 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
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 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 Fork of Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1
96% match
Loading thumbnail…

Fork of 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 yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000
96% 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!

This example uses D3.js v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu
96% match