Fork sniley

100%

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

This example draws a smiling face using SVG primitives and animates its eyebrows. It uses D3 v7’s `select` and `arc` APIs, along with the `transition` method to move the eyebrows down and back up over two seconds. The face’s head, eyes, and mouth are constructed with circles, rectangles, and an arc path, all positioned via SVG transforms. The rendering is a static SVG with a single animated group, demonstrating basic D3 shape creation and chained transitions.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Forking

A smiling face rendered in SVG continuously raises and lowers its rectangular eyebrows through chained D3 transitions. The example demonstrates fundamental DOM manipulation with D3 v5, using selection methods like `append` and `attr` to build the face from basic shapes—a circle for the head, arcs for the mouth, and rectangles for the brows. The code explicitly uses `d3.arc` and `d3.select` to construct the mouth path and animate the eyebrow group’s `transform` attribute over timed durations.

Nnagasai-gummadi

90% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a smiley face from basic SVG shapes and animates its eyebrows. The face comprises a green circle, two eyes, a mouth drawn with an arc, and two rectangular eyebrows. D3’s `transition` API moves the eyebrows up and down in a two-second loop. The code builds the SVG scene by directly appending elements like `circle`, `rect`, and `path` to a centered group, using `d3.select` to target the SVG and `d3.arc` for the mouth’s path data.

Ssugunagar

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

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

89% match

Loading thumbnail…

Fork of 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.

PPriya Tiwari

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

89% match

Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999

89% match

Loading thumbnail…

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

This interactive visualization displays a smiling face built with SVG shapes, whose eyebrows slide upward and then return in a repeated motion. The code uses D3.js v5 to select the SVG canvas, compute dimensions, and append a green circle as the head, along with eyes, rectangular eyebrows, and an arc-based mouth. D3’s `transition()` and `duration()` methods drive the eyebrow animation, while `select` and `arc` are explicitly imported from the library. The example demonstrates fundamental DOM manipulation and chained transitions in a minimalist, animated composition.

SSaivignesh-9176

89% match