Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssimpleguy86@gmail.com
Last edited Jan 9, 2025
Created on Jan 9, 2025

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.

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 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
100% 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
97% match
Loading thumbnail…

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 a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

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

This example uses D3.js to construct an animated smiley face from basic SVG shapes—a yellow circle for the head, separate circles for the eyes, rectangles for eyebrows, and a curved arc for the mouth. The eyes and mouth are static, while the eyebrows perform a looping transition that moves them up and down over two seconds each way. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, and uses `d3.arc` to generate the mouth’s path, with `transition().duration()` controlling the animation.

Aasowmyasri15@gmail.com
96% match
Loading thumbnail…

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

This example uses D3.js to construct an animated smiley face from basic SVG shapes—a yellow circle for the head, separate circles for the eyes, rectangles for eyebrows, and a curved arc for the mouth. The eyes and mouth are static, while the eyebrows perform a looping transition that moves them up and down over two seconds each way. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, and uses `d3.arc` to generate the mouth’s path, with `transition().duration()` controlling the animation.

Aasowmyasri15@gmail.com
96% match
Loading thumbnail…

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

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
96% match
Loading thumbnail…

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. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03
96% match