Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Nnsatyaprakash22
Last edited Feb 23, 2023
Created on Feb 17, 2023

This example demonstrates DOM manipulation with D3.js by constructing a smiley face from SVG shapes, complete with a sky-blue head, eyes, nose, mouth, and ears. The most notable behavior is the animated movement of the eyebrows, which shift upward and then return to their original position over a two-second cycle. The code uses D3 v5 and the `select` and `append` functions to build the SVG structure, and it leverages chained `transition` calls to animate the eyebrows' transform attribute. The SVG canvas is 960 by 500 pixels, and the face is centered within it.

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 Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face composed of a sky-blue head, eyes, nostrils, a curved nose, and a mouth. An animated sequence moves the eyebrows up and down over two seconds using chained `transition` calls on a group element. The visualization relies on D3 v5 selection and `arc` APIs to build the SVG shapes and animate properties.

Nnsatyaprakash22
97% 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 basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77
97% match
Loading thumbnail…

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

A D3.js smiley face demonstrates animated SVG construction, with eyebrows that repeatedly translate upward and back over two-second transitions. The example builds the face from geometric primitives—circles, rectangles, and an arc path for the mouth—using d3.select to target the SVG element and d3.arc to define the mouth’s curved shape. The code explicitly manages a group hierarchy, translating components like eyes and eyebrows relative to the face’s center. This serves as a foundational exercise in DOM manipulation and chained transition methods within the D3 v5 API.

TTejaswicmandava
96% match
Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

Sskambhore04
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 circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

PPrathyusha Jampala
96% match
Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999
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 rendering a smiley face whose eyebrows animate upward and downward. The SVG face is constructed from circles, rectangles, and an arc path, using D3 selections to append elements and set attributes. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, translating the eyebrow group along the Y-axis. The code leverages D3 v5 modules like `select` and `arc`, with inline SVG coordinates defining the face’s layout.

Rradhadevarapu
96% match
Loading thumbnail…

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

A smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face, centered on a blue circle, includes eyes and an arc-based mouth. D3 transitions move the eyebrow group upward and back over two seconds. The code uses `select`, `arc`, and chained `transition().duration()` calls from d3.v5 to animate SVG attributes.

Sshiiva-surya
96% match