Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
JJustin Roberts
Last edited Feb 20, 2023
Created on Feb 20, 2023

A D3.js animation constructs a stylized smiley face as an SVG, with a fixed orange circle head, eyes, and a mouth shaped by a path arc. The primary behavior is a continuous eyebrow movement: the eyebrows (as rectangles) animate upward and back down over two seconds each way, using a chained sequence of `transition` calls on the SVG group’s transform attribute. The code demonstrates basic DOM manipulation with `d3.select` and `append`, and relies on D3’s `arc` generator for the curved mouth. The rendering is purely client-side, with the SVG viewport fixed at 960 by 500 pixels.

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

A D3.js smiley face, built from SVG primitives, demonstrates fundamental DOM manipulation and transitions. A green circle forms the head, with two dark circles for eyes and an orange arc for the mouth, all positioned using geometric constants. The animation shows both rectangular eyebrows moving up and down together via chained `transition().duration()` calls that modify their container's `transform` attribute. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, with all elements grouped and translated to the SVG center for easy positioning.

NNavaneeth-Ragi
95% 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
95% match
Loading thumbnail…

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

This example uses D3.js to construct a smiley face out of basic SVG shapes, then animates it. The code builds a blue circle for the head, eyes, and a mouth using `d3.arc`, while two rectangular eyebrows are moved up and down via chained `transition.attr` calls with a 2000ms duration. The animation runs in a loop, demonstrating select-and-append DOM manipulation and declarative transitions on SVG elements.

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

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

A D3.js smiley face animates by moving its eyebrows up and down in a looping transition. The face is built entirely with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—positioned within a centered group. Using `d3.select`, `d3.arc`, and chained `transition().duration()` calls, the code shifts the eyebrow group’s vertical translation between two offsets. A black background and yellow face with black strokes create clear visual contrast. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

SSANEEM MOHAMMAD
95% 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
95% match
Loading thumbnail…

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

A smiley face built with D3.js animates its eyebrows up and down in a rhythmic loop. The SVG drawing includes a large orange head, ears, eyes, a rectangular nose, and a curved mouth path generated with `d3.arc`. Using `d3.select` and `transition.attr`, the eyebrow group shifts between two vertical positions over two-second intervals, demonstrating basic DOM manipulation and chained transitions with D3 v5.

Aavvarijayakrishna99@gmail.com
95% match
Loading thumbnail…

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

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase
95% match