Fork of hjjj

100%

✓ Published0🌍 Public

Last edited Jun 27, 2022

Created on Jun 27, 2022

Forked from hjjj

A yellow smiley face drawn in SVG with D3 v5 demonstrates chained transitions by animating its eyebrows upward and then back down. The face is composed of circles, rectangles, and an arc-generated mouth positioned relative to the SVG center. Code uses `d3.select`, `d3.arc`, and `transition.duration` to move a group of eyebrow rectangles, showing basic DOM manipulation and timed animation sequences without data binding.

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 animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js v5. The SVG face is built from circles, rectangles, and an arc-generated mouth, centered by translating a group element. D3’s `transition().duration()` shifts the eyebrow group upward and back down in a two-second loop. The code imports `select` and `arc` from the D3 module, using method chaining to append and style each shape.

Hhossaphul

92% match

Loading thumbnail…

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

A yellow smiley face, drawn with SVG circles and an arc path, demonstrates basic D3.js DOM manipulation. The face’s rectangular eyebrows animate by moving up and down through two chained `transition().duration(2000)` calls on a group element. The code uses `d3.select`, `d3.arc`, and `d3.transition` from D3 v5 to build and animate the static face, with no external data source.

JJasvitha Allamsetty

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

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

91% match

Loading thumbnail…

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

A yellow smiley face, built from SVG shapes, demonstrates D3.js v5’s DOM manipulation and transition methods. The code appends a circle for the head, two for the eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows animate by moving up and down via sequential `transition().duration()` calls on a group element. This example shows basic data-joins and attribute updates, with a static yellow face rendered in an SVG canvas.

SSANEEM MOHAMMAD

91% match

Loading thumbnail…

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

A yellow smiley face drawn with SVG shows off basic D3.js DOM manipulation: the code appends circles for eyes and a mouth, uses a path with `d3.arc` for the smile, and animates the eyebrows with repeated `transition.attr` calls that shift their vertical position over two seconds. The face is centered by translating a grouping element, with fixed numeric constants for eye spacing, radius, and eyebrow sizing. The animation loops once, lifting the eyebrows upward then returning them, demonstrating chained transitions on the same selection.

DDimas Sudjito

91% match

Loading thumbnail…

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

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate chained transitions on the eyebrows. The face, built with `d3.select` and `d3.arc` for the mouth, animates both rectangular eyebrows upward over two seconds, then returns them to their original position. The eyebrows move as a group via `transition.attr` on the transform attribute, while static circles and rectangles define the eyes and brows. This example shows basic DOM manipulation and timed animation without external data.

LLozakaka

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

91% match