Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNikhilchiguru-8
Last edited Feb 22, 2023
Created on Feb 22, 2023

A yellow smiley face rendered in SVG cycles through a two-second animation in which its eyebrows rise and fall. Built entirely with D3.js v5, the example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-generated mouth to a central group. The d3.arc function creates the mouth's path, while chained transition() calls with specified durations animate the eyebrow group's vertical position.

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!

A yellow smiley face with black features animates its eyebrows in a looping motion. The face is built from SVG elements, including circles for the eyes and an arc-generated path for the mouth. D3.js v5 handles DOM manipulation and transitions, using `select` to append elements and `transition().duration()` to move the eyebrows up and down. The example demonstrates fundamental D3 selections, attribute setting, and animation on a fixed 960x500 SVG canvas.

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js. The code builds the face using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path created with d3.arc for the mouth. Eyebrows move up and down through chained transition.attr calls, each lasting two seconds. The example uses d3.select and d3.arc from D3 v5, with the entire scene rendered as static SVG elements on a 960×500 canvas.

Rradhadevarapu
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Eyebrows move up and down repeatedly via chained `transition()` calls with 2000-millisecond durations. The code imports `select` and `arc` directly from the d3 module, and centers all elements using SVG group transforms.

SSANEEM MOHAMMAD
95% match
Loading thumbnail…

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

This example demonstrates basic D3.js DOM manipulation by constructing a yellow smiley face with green eyes, red arc mouth, and grey eyebrows that animate upward and back down in a looping transition. The code builds SVG shapes—circles, rectangles, and a path using the `d3.arc` helper—inside a centered group, then applies chained `transition().duration(2000)` calls to move the eyebrow group along the y-axis. The face is rendered in an SVG canvas with dimensions set from the HTML attributes, and all styling is applied directly via D3 attribute methods.

55577Satvik
95% match
Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation and animation with D3.js. The code selects an SVG element and builds the face using circles for eyes, rectangles for eyebrows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates its vertical position over two seconds, then returns it, creating a repetitive raising and lowering effect. The example relies on D3 v5 selections, attributes, and transitions in a straightforward SVG scene.

SSanjib Paudel
95% match
Loading thumbnail…

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

A yellow smiley face with blinking eyebrows is rendered as an SVG using D3.js v5. The face is centered via a group transform, with circles for eyes, rectangles for brows, and a path built with the `arc` generator for the mouth. Two chained `transition` calls on the eyebrow group animate its vertical position, moving the brows up and down over two-second intervals. This demonstrates fundamental DOM manipulation and chained transitions in D3.

VVis Ivaturi
95% match