Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
SSharmaAshwini
Last edited Feb 23, 2023
Created on Feb 21, 2023

This example demonstrates fundamental DOM manipulation in D3.js by constructing a static smiley face and animating its facial features. The face is composed of SVG shapes, including circles for the head and eyes, arc-based paths for eyebrows and mouth, rectangles for the nose and teeth, all colored with pink, black, red, and white fills. The animation uses D3’s `.transition()` method to move the eyebrows vertically over two-second intervals, while the code employs `d3.select`, `d3.arc`, and SVG attribute setters to position every element relative to the canvas center.

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

This example uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

Sskambhore04
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a static smiley face in SVG and animating its eyebrows. The face is built from primitive shapes—circles for the eyes, rectangles for the eyebrows and hair, and a path generated with the `arc()` function for the mouth—all positioned within a centered `<g>` element. Using `transition.attr`, the eyebrows move upward and then return to their original position over repeated two-second intervals. The code relies on `d3.select`, `d3.arc`, and chained transitions to create the looped motion.

BBenoit Estrade
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

PPrathyusha Jampala
96% match
Loading thumbnail…

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

A playful D3.js animation renders a cartoon smiley face from SVG primitives, including a pink circle head, eyes, arched eyebrows, a red nose, a mouth, and white teeth. Using D3’s `arc()` generator, the mouth and eyebrow paths are drawn, while `transition()` and `duration()` animate the eyebrows moving up and down at different speeds. The code constructs groups with `append("g")`, positions elements via `attr("transform", ...)`, and imports utilities like `select` and `arc` from the d3 module.

SSharmaAshwini
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows animate up and down. The face is built using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. D3 transitions animate the eyebrow group’s `transform` attribute over two sequential two-second intervals. The code selects the SVG element, appends a centered group, and uses D3’s `select` and `arc` imports to construct the static and dynamic elements.

NNiharika-Guthikonda
96% match
Loading thumbnail…

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

This example demonstrates basic DOM manipulation with D3.js by constructing a smiley face from SVG circles, rectangles, and an arc path. The face’s eyebrows animate up and down in a repeating two-second cycle using chained `transition().duration()` calls. Built with D3 v5, the code uses `select`, `arc`, and attribute setters to position facial features relative to the SVG center. The data is hardcoded via numeric constants for spacing and dimensions, and the animation runs continuously on page load.

PPranjali-Mohurle
96% match
Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face entirely from SVG shapes. A circle forms the face, with smaller circles for eyes and cheeks, rectangles for eyebrows, nose, and mouth, all positioned relative to the center. The code demonstrates fundamental DOM manipulation with `d3.select` and `append`, while `setInterval` triggers D3 transitions that move the eyebrows and enlarge the cheeks in a looping animation.

Ssatishnarne99@gmail.com
95% match
Loading thumbnail…

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

This animated SVG smiley face demonstrates fundamental DOM manipulation with D3.js. The visualization uses D3's selection and append methods to construct geometric shapes—a pink circle head, two black eyes, rectangular eyebrows, and an arc-based mouth—all centered within an SVG canvas. The eyebrows perform a continuous up-and-down motion through chained `transition().duration(2000)` calls that alternate between two vertical positions. The code relies on D3 v5 utilities including `select`, `arc`, and the transition API to create the looping animation effect.

PPrathyusha Jampala
95% match