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

100%

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

✓ Published0🌍 Public

Last edited Sep 21, 2023

Created on Sep 21, 2023

Forked from 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.

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 v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu

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 forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy

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

97% match

Loading thumbnail…

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

This example builds a smiling face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates fundamental DOM manipulation through selections and chained `transition` calls that animate the eyebrows upward and back down over two two-second intervals. Rendering is done entirely with SVG elements appended to a 960×500 canvas, using D3’s `select`, `append`, attribute setters, and the `arc` generator for the mouth path.

AAvi171725888

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

96% match

Loading thumbnail…

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

This example builds a smiley face out of SVG shapes—a yellow circle, two eyes, and a mouth drawn with `d3.arc()`—and animates its rectangular eyebrows by chaining two `transition().duration()` calls. The code selects the SVG element with `d3.select`, appends a group for centering, and transitions the eyebrow container between two vertical offsets, creating a bobbing motion. It demonstrates fundamental DOM manipulation and chained transitions using D3 v5 without external data.

Ddhanushkar006

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