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

100%

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

✓ Published1🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

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

A smiling face drawn with SVG shapes animates its eyebrows up and down repeatedly. The D3.js v5 code uses `select` to target the SVG element, `append` to add circles for the face and eyes, and rectangles for eyebrows. A `path` with `d3.arc` creates the mouth. A chained `transition().duration(2000).attr(...)` call moves the eyebrow group between two vertical positions, creating the looping movement.

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 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

97% match

Loading thumbnail…

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

A smiling face rendered in SVG animates as its eyebrows repeatedly rise and lower, demonstrating basic shape construction and timed transitions with D3.js v5. The code builds the face from geometric primitives—circles for the eyes, rectangles for brows, and a path generated with the `arc` helper for the mouth—all positioned via SVG transforms. A chained `transition().duration()` sequence moves the eyebrow group up and down in a two-second loop, showing how to animate attributes without external data.

PPriya Tiwari

97% 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

97% match

Loading thumbnail…

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

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

VVamshisoleti09

96% match

Loading thumbnail…

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

A smiling face made of SVG shapes animates its eyebrows up and down. The example demonstrates DOM manipulation with D3.js v5, using `d3.select` to target the SVG element and appending circles, rectangles, and a path for the mouth. Eyebrow movement is achieved with chained `transition().duration(2000)` calls that alternate the `transform` attribute, while the mouth uses the `d3.arc` generator to define its curved shape. The face is centered via a `g` element with a translated transform.

Rradhadevarapu

96% match

Loading thumbnail…

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

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` to append SVG circle, rectangle, and path elements for the face, eyes, eyebrows, and mouth. Animated eyebrows are implemented with chained `transition.attr` calls that alternate the vertical position of a group containing two rectangles. The mouth is generated using the `d3.arc` helper with specified inner and outer radii and angle ranges.

MMadan05101998

96% match

Loading thumbnail…

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

A smiling face built with D3.js animates its eyebrows in a looping motion. The SVG face is assembled from simple shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. D3 selections and the `arc()` generator position these elements, while chained `transition().duration()` calls alternately shift the eyebrow group up and down. The example demonstrates fundamental DOM manipulation and transitions using D3 v5.

Ssrinivasaraosankula

96% match

Loading thumbnail…

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

A smiling face drawn with D3.js animates by repeatedly moving its eyebrows up and down. The visualization demonstrates fundamental DOM manipulation by building the face from SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Using D3 v5 and the `select` API, the eyebrows are animated with chained `transition` calls, each lasting two seconds, to create a looping motion.

Pprachow

96% match