Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
RRadha246
Last edited Feb 20, 2022
Created on Feb 20, 2022

This example builds a cheerful, animated smiley face using D3.js (v5) and SVG. It demonstrates core DOM manipulation and transitions by drawing a yellow head, eyes, eyebrows, and a mouth with the `d3.arc` path generator. The code sequentially applies a 2-second `transition` to shift the eyebrow group vertically, creating a bobbing motion. The face is centered and scaled relative to the SVG’s dimensions, with all shapes positioned using calculated offsets for eyes and brows.

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

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
96% match
Loading thumbnail…

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

This example builds a yellow smiley face with D3.js, featuring two eyes, a mouth drawn with the `d3.arc` path generator, and eyebrows that animate vertically via chained `transition().attr()` calls over two-second intervals. The face is centered using an SVG `g` element transformed to the viewport’s midpoint, with all shapes positioned relative to that origin. The code uses D3 v5 selections and transitions to demonstrate fundamental DOM manipulation and SVG attribute updates, rendering the animation entirely in the browser.

KKeerthipriyaBankuru
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built entirely with D3.js v5, featuring two eyes and a curved mouth drawn with an arc path. The face’s eyebrows, rendered as rectangles, animate up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 selections to append SVG elements, `d3.arc` for the mouth, and attribute manipulation to position the facial features relative to the SVG's center. All rendering occurs in an inline SVG with CSS hiding page overflow.

JJenifer Vivar
96% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

Ssabaliaqat786
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

SSnapika
96% match