Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Aasowmyasri15@gmail.com
Last edited Feb 16, 2025
Created on Feb 16, 2025

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.

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

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

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

Nnofferdahl
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

YYUTONG FENG
97% 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
97% match