Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Kkamleshkr01
Last edited Oct 3, 2023
Created on Oct 3, 2023

This example animates a stylized smiley face drawn with D3.js, showing its eyebrows moving up and down in a looping motion. The face is composed of SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses D3’s `select` to access the SVG, `arc` to define the mouth, and chained `transition().duration()` calls to animate the eyebrow group’s vertical position. All elements are centered using a translated `<g>` group.

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 shows a stylized smiley face rendered as SVG, with animated eyebrows that move upward and then return to their original position. The face is constructed using D3.js v5 and fundamental DOM manipulation: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `d3.arc()` helper for the mouth. The eyebrows’ motion is driven by chained `transition()` calls with a specified duration, demonstrating the selection and chaining API.

VVKeerthika24
97% match
Loading thumbnail…

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

This example shows a stylized smiley face built with D3.js v5, rendered as SVG with animated eyebrows that move up and down repeatedly. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending groups, circles, rectangles, and a path for the mouth. The code uses D3’s `select` and `arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow positions. The face is centered with a magenta circle background, and the animation loops via transition chaining without external data, relying purely on hardcoded geometric constants.

TTarun Kumar Bosupally
96% match
Loading thumbnail…

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

This example demonstrates a smiley face whose eyebrows animate upward and downward in a looping motion. Using D3.js v5, the code constructs the face from SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with `d3.arc()` for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s vertical transform. All elements are appended to a centered `<g>` within an SVG canvas, with no external data source.

Ssolution365
96% match
Loading thumbnail…

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

A D3.js smiley face animates its eyebrows in a looping vertical motion, shifting up and down every two seconds. The face is drawn entirely with SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc` generator for the mouth. The code uses `d3.select` to manipulate the SVG canvas, handles mouse events implicitly through transitions, and relies on D3 v5's `transition().duration()` method to animate the eyebrow group's transform attribute. The layout is centered via a translation transform based on the viewport dimensions.

BBKirst3
96% match
Loading thumbnail…

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

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

DDharanitharan-J
96% match
Loading thumbnail…

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

This example demonstrates a smiley face drawn with D3.js, featuring animated eyebrows that move up and down in a looping transition. The face is constructed using SVG primitives, with a yellow circle for the head, two eye circles, and a mouth path generated with the `arc` function. The code imports `select` and `arc` from D3 v5, explicitly setting dimensions from the SVG attributes and centering a group element. The eyebrows are rectangular shapes within a nested group, animated via chained `transition` calls that adjust their vertical position over two-second intervals.

HHarshavardhan
96% 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
96% 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
96% match