Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
AAlfaShivamKumar
Last edited Oct 3, 2023
Created on Oct 3, 2023

A yellow smiley face rendered in SVG has its eyebrows repeatedly moving up and down in a looping animation. The example demonstrates basic D3.js selection, attribute manipulation, and chained transitions on SVG elements. It uses the `d3.select` API to append circles, rectangles, and an arc-generated mouth path, while `transition().duration()` cycles the eyebrow group's vertical transform. The scene is centered via a translated `g` element, with hardcoded geometric values for facial features.

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 is rendered in SVG, with its eyebrows animating upward and back downward over four seconds. The face is built using D3.js v5 selections and `arc()` for the mouth, with `circle` and `rect` elements for eyes and brows. A `transition()` chain moves the eyebrow group vertically, demonstrating sequential DOM updates driven by D3's transition API.

AAlfaShivamKumar
97% match
Loading thumbnail…

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

This example creates a yellow smiley face with eyes, eyebrows, and a smile using D3.js v5. The code builds the face with SVG circles, rectangles, and an arc path, then animates the eyebrows by repeatedly transitioning their vertical position over two-second intervals. It demonstrates fundamental DOM manipulation with selections and the `transition()` method, using `d3.select` and `d3.arc` to construct the shapes in a centered group.

AAlfaShivamKumar
96% match
Loading thumbnail…

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

A yellow smiley face is drawn with two eyes and a curved mouth, and its eyebrows animate by moving upward and then back down in a loop. The example demonstrates fundamental D3.js v5 DOM manipulation using SVG elements like `circle`, `rect`, and `path`. The code uses `select` and `arc` from D3, and the animation is driven by chained `transition().duration(2000)` calls that alter the `transform` attribute on the eyebrow group.

Aalvasilvao
96% match
Loading thumbnail…

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

A yellow smiley face rendered as an SVG reacts to a repeating transition, with both eyebrows moving up and down in sync. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, and drawing shapes like circles, rectangles, and an arc for the mouth. It uses `d3.select` and `d3.arc`, with `transition().duration()` to animate the eyebrow positions over 600-millisecond intervals. The face is centered using SVG transform attributes, and the code runs with d3.v5.

Iiidalindh
96% match
Loading thumbnail…

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

This example builds a yellow smiley face with SVG shapes, including circular eyes, rectangular eyebrows, and an arc-based mouth. Using D3.js v5, it demonstrates DOM manipulation by selecting the root `svg` element, appending a centered group, and positioning each facial feature with translation transforms. The eyebrows move through a chained `transition().duration()` sequence, animating their vertical position over four seconds before stopping. The face itself is static afterward, with no interactive or data-driven behavior beyond the initial scripted animation.

AAlfaShivamKumar
96% match
Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas, with animated eyebrows that move up and down repeatedly. The example demonstrates fundamental DOM manipulation with D3.js, using a simple data-free composition of SVG shapes: circles for the face and eyes, rectangles for eyebrows, and a path created with the `d3.arc` generator for the mouth. D3's `transition` method triggers the eyebrow animation, while the `select` and `append` APIs build the hierarchical SVG structure centered on the canvas.

AAsimali39
96% match
Loading thumbnail…

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

This example shows a yellow smiley face with two eyes, moving eyebrows, and a curved mouth, rendered as SVG shapes. The eyebrows shift upward and then return to their original position using chained `transition().duration()` calls. The code builds the face with D3 selections and shape generators, including `select`, `arc`, and attribute setters like `.attr()`, positioning elements via `translate` transforms on a centered group. The face is drawn entirely through D3’s DOM manipulation, with no external data source.

SSUNAMLIMBU
96% match
Loading thumbnail…

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

This example uses D3.js to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc-generated mouth, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while a chained `transition().duration()` animation moves the eyebrows up and down in a repeating cycle. The face is drawn using static attributes for radius, spacing, and colors, with the mouth created via the `d3.arc()` helper.

Ssimpleguy86@gmail.com
96% match