Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Nnsatyaprakash22
Last edited Feb 17, 2023
Created on Feb 17, 2023

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

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 Let's make a face with D3.js!

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
100% 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 and transitions. The face is built by appending SVG circles for the eyes and face, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Using `.transition().duration(2000)`, the eyebrow group shifts vertically down and back up, creating a repeated motion. The code explicitly imports `select` and `arc` from the D3 v5 library.

44charan4
95% match
Loading thumbnail…

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

This animated SVG face uses D3.js v5 to demonstrate fundamental DOM manipulation. A yellow circle forms the head, with black-outlined eyes and a path drawn mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition()` calls with 2000-millisecond durations. The example shows how to build and move SVG elements dynamically, with a black page background set via D3’s selection style method, and relies on basic attribute setting for positioning.

SSANEEM MOHAMMAD
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face is built using circles for the eyes and an arc path for the mouth, centered via a group transform. Using `d3.transition` with a 2000-millisecond duration, the eyebrows—rendered as rectangles—move up and down in a looping sequence, showcasing sequential transition chaining in D3 v5. The code imports `select` and `arc` from the D3 module to construct and animate the static face.

Mmanishcheruku
95% 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
95% 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 code uses d3-selection to append SVG circles, rectangles, and an arc-generated mouth path onto a central group. Two sequential `transition` calls with 2000-millisecond durations move the eyebrows down and back up. D3 v5's `select` and `arc` utilities handle element selection and path geometry, while SVG attributes define the face's static features and the animation loop controls the eyebrow motion.

Eetiosa
95% match
Loading thumbnail…

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

This example animates a cartoon face built from basic SVG shapes, with eyebrows that move up and down over time to create a playful expression. The face consists of a yellow circle for the head, two black-outlined eyes, and a mouth drawn as a curved arc. The code uses D3.js v5 to construct and manipulate the SVG elements, and leverages D3's `transition()` method to animate the vertical position of the eyebrows. The static parts of the face (head, eyes, mouth) are defined with D3's `select` and `append` APIs, while the mouth is generated with `d3.arc`. The animation runs in a continuous loop, making the face appear to raise and lower its brows indefinitely.

DDINESH SAI BOPPANA
95% match
Loading thumbnail…

Fork of Let's make a face with d3.js

A cheerful yellow face is drawn in SVG and animated with D3.js v7. The face features a circular head, two eyes, and rectangular eyebrows that move up and down over two seconds. The mouth is rendered as an arc path using the `arc()` method, which defines its inner and outer radii and angular range. The code uses `select` to target the SVG element, `append` to build the grouped shapes, and `transition().duration()` to animate the eyebrow group’s transform, demonstrating basic D3 animation and SVG construction.

FFarhodXoliyarov
94% match