Skip to main content
SimilarExport ZIP
100%

Fork

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—demonstrating DOM selection and manipulation via `d3.select` and `d3.append`. The eyebrows repeatedly shift vertically using a chained `transition().duration(2000)` sequence. All positioning relies on fixed numeric coordinates and transforms, with no external data source.

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 face

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation using D3.js. The face is built from SVG shapes, including circles for the eyes and head, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses d3.select and d3.arc, with a chained transition that moves the eyebrow group up and down over two-second intervals, creating a looping eyebrow raise. Static attributes set the face dimensions and positions within a 960 by 500 SVG canvas.

EEbenizerR
94% match
Loading thumbnail…

Fork to Make a face

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The code uses `d3.select`, `d3.append`, and `d3.arc` to build the face, while sequential `transition().duration()` calls move the eyebrows up and down in a two-second cycle. The static SVG elements—circle, rectangles, and path—are positioned using translation transforms, with no external data source beyond fixed constants.

Rraphman100
94% match
Loading thumbnail…

Fork skirthi

A yellow smiley face rendered in SVG demonstrates animated eyebrow movement. The face is constructed from D3 primitives: a circle for the head, circles for eyes, rectangles for brows, and a path generated with `d3.arc` for the mouth. The eyebrows animate via chained `transition` calls with two-second durations, moving up and then returning to their original position. The code imports `select` and `arc` from D3 v7 and places elements using SVG transform attributes.

Kkiruthiga1304
93% match
Loading thumbnail…

Fork of face

This example shows a simple smiley face built with D3.js, rendered as SVG with a yellow circle, eyes, and a mouth. The code demonstrates fundamental DOM manipulation by using `d3.select` to append elements and `transition.attr` to animate the eyebrows, which move upward and then back down in a looping 2-second cycle. It relies on the D3 v5 API, including `arc` for the mouth path, with dimensions defined by hardcoded constants for spacing and radii.

EEbenizerR
93% match
Loading thumbnail…

Fork of face

A stylized smiley face built with D3.js v5 combines SVG shapes and transitions to animate raised and lowered eyebrows. The face includes a yellow circle head, black-outlined features, elliptical cheeks and ears, and a curved mouth generated with the `arc()` function. Using `select`, `append`, and `attr`, the code positions eyes, nose, and hair, while a chained `transition().duration(2000)` sequence moves the eyebrow group up and down, creating a surprised or expressive look. The visualization demonstrates fundamental DOM manipulation and animation via D3’s selection and transition APIs, with all elements rendered as SVG inside a fixed 960×500 viewport.

Eenckkipronoh@gmail.com
93% 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
92% 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
92% match
Loading thumbnail…

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

This example shows a yellow smiley face with animated eyebrows, which shift upward and then return to their resting position in a looping motion. The face is constructed entirely from SVG primitives—circles for the eyes and head, rectangles for the brows, and a path for the mouth—all centered within a 960×500 viewport. Using D3 v5, the code demonstrates DOM manipulation through chained `select`, `append`, and `attr` calls, while the eyebrow animation relies on the `transition` API to tween the `transform` attribute over 1500 milliseconds.

DDeeraj Thakkilapati
92% match