Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPrathyusha Jampala
Last edited Feb 23, 2023
Created on Feb 22, 2023

This animated SVG smiley face demonstrates fundamental DOM manipulation with D3.js. The visualization uses D3's selection and append methods to construct geometric shapes—a pink circle head, two black eyes, rectangular eyebrows, and an arc-based mouth—all centered within an SVG canvas. The eyebrows perform a continuous up-and-down motion through chained `transition().duration(2000)` calls that alternate between two vertical positions. The code relies on D3 v5 utilities including `select`, `arc`, and the transition API to create the looping animation effect.

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

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

An animated smiley face with moving eyebrows, rendered as SVG via D3.js, demonstrates fundamental DOM manipulation. The face is built using basic D3 shapes—circles, rectangles, and an arc-generated mouth—positioned within a centered group. The eyebrows transition vertically through chained `transition().duration()` calls, creating a repeating bobbing effect. Additional elements include ears, hair, and teeth, all styled with simple fill and stroke attributes. The code imports `select` and `arc` from D3 v5 to construct the geometric components and drive the animation.

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

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
Loading thumbnail…

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

This animated smiley face demonstrates how D3.js can manipulate SVG elements over time. The visualization builds a face from basic shapes, including a sky-blue circle, eyes, eyebrows, and a mouth, with the eyebrows animating up and down using the `transition` API. The code relies on D3 v5's `select`, `append`, and `arc` methods to construct and position the geometry within an SVG canvas. The example specifically highlights declarative DOM manipulation and chained transitions to create a simple, looping facial expression.

TTejaswicmandava
96% 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!

A smiley face, rendered as SVG elements, demonstrates fundamental DOM manipulation with D3.js. The face's eyebrows animate by repeatedly shifting their vertical position via chained `transition()` calls, each lasting two seconds. The code uses D3's `select`, `append`, and `attr` methods to build the circle, eyes, and rectangular eyebrows, while an `arc()` path creates the mouth. The animation loops the eyebrows up and down continuously.

MMaurice Huang
96% match
Loading thumbnail…

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

A playful D3.js animation renders a cartoon smiley face from SVG primitives, including a pink circle head, eyes, arched eyebrows, a red nose, a mouth, and white teeth. Using D3’s `arc()` generator, the mouth and eyebrow paths are drawn, while `transition()` and `duration()` animate the eyebrows moving up and down at different speeds. The code constructs groups with `append("g")`, positions elements via `attr("transform", ...)`, and imports utilities like `select` and `arc` from the d3 module.

SSharmaAshwini
96% match