Skip to main content
SimilarExport ZIP
100%

Fork of its fun when u know how cute done D3.js!

✓ Published1🌍 Public
Ggautam kumar jha
Last edited May 4, 2021
Created on May 4, 2021

This animated SVG smiley face demonstrates fundamental D3.js DOM manipulation by adjusting the position of cartoon eyebrows. A light blue circle forms the face, with two smaller circles for eyes and a path generated using the `arc()` generator as a mouth. The eyebrows, rendered as rectangles, move up and down through two chained `transition()` calls, each lasting two seconds, shifting the group’s `transform` attribute. The example uses d3.select and d3.arc to build static elements and animate them sequentially.

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!

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

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

A smiley face drawn with D3.js animates its eyebrows bobbing up and down in a looping transition. The example demonstrates basic SVG shape creation and DOM manipulation using D3 selections, appending circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The `transition()` method with a 2000-millisecond duration moves the eyebrow group vertically, then reverses the transform to create the oscillation. It uses D3 v5's `select` and `arc` APIs.

AAsrar Al Qassem
92% match
Loading thumbnail…

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

This example shows a smiley face whose eyebrows periodically move up and down, demonstrating basic DOM manipulation with D3.js. The face is drawn using SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The animation uses D3's `transition()` method to shift the eyebrow group’s transform attribute back and forth, creating a looping motion. The code imports `select` and `arc` from the D3 v5 library and relies on SVG for rendering.

BBrickDust
92% match
Loading thumbnail…

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

This example uses D3.js to build a smiley face directly in SVG, with animated eyebrows that move up and down in a repeated cycle. It demonstrates basic DOM manipulation by creating circles for the eyes and face, rectangles for the eyebrows, and an arc path for the mouth using D3’s `arc()` helper. The animation relies on chained `transition().duration()` calls to shift the eyebrows’ vertical position. The code explicitly imports `select` and `arc` from D3 and renders everything within a 960x500 SVG canvas.

Mmarcob896
92% match
Loading thumbnail…

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

A D3.js smiley face demonstrates basic DOM manipulation with animated eyebrows. Built with d3.v5, the example uses D3 selections to append SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—into a centered group. A two-stage `transition()` chain moves the eyebrow group up and back down over four seconds, illustrating D3's animation timing. The code imports `select` and `arc` from the 'd3' package, with dimensions read directly from the SVG attributes.

SSayan Chatterjee
92% match
Loading thumbnail…

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

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.

PPrathyusha Jampala
92% match
Loading thumbnail…

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

This visualization demonstrates fundamental D3.js DOM manipulation by rendering a smiley face with animated eyebrows. The code uses D3 v5 to select an SVG element and append geometric shapes—circles for the face and eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. A chained `transition` with a two-second duration repeatedly moves the eyebrows upward and back down, creating a subtle expressive animation. The example relies entirely on D3’s selection, attribute, and transition APIs, with no external data sources.

Jjasondmelloprogrammer
92% match