Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
YYouSheng-Do
Last edited Sep 18, 2023
Created on Sep 18, 2023

This example uses D3.js to construct a smiley face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc for the mouth. The animation repeatedly moves the eyebrows up and down by chaining two `transition().duration(2000)` calls that modify the group’s `transform` attribute. The code selects the SVG element, computes its dimensions, and positions a central group before appending shape elements with fixed offsets and radius values. It relies on D3’s `select`, `arc`, and transition methods, rendered as static SVG with animated transforms.

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

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 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 demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition().duration()` calls, moving their containing group’s `transform` attribute over two seconds. The code uses D3 selections, `attr()`, and `append()` to construct elements, alongside the `arc()` generator from D3’s shape module.

HHojjat Karami
96% match
Loading thumbnail…

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

This example uses D3.js to construct a smiley face entirely from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth drawn with an arc path. The code demonstrates fundamental DOM manipulation by selecting an SVG element, appending groups and shapes, and applying transforms. The eyebrows animate by chaining two `transition().duration(2000)` calls that shift their vertical position up and then back down, cycling through a curious expression. All shape attributes, such as radii and spacing, are defined as constants, and the face is centered using a translation based on the SVG's height and width.

AAbdulazizfh
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 a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746
96% match
Loading thumbnail…

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

This example uses D3.js to build a smiley face from basic SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The animation shows the eyebrows moving down and back up through chained `transition` calls, each lasting two seconds. The code imports `select` and `arc` from D3, sets up the SVG canvas, and uses `attr('transform')` to position elements relative to the center. It demonstrates fundamental DOM manipulation and animation with D3 v5.

AAvinarasi
96% match