Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTarun Kumar Bosupally
Last edited Feb 28, 2024
Created on Feb 28, 2024

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.

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

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

This example displays a stylized smiley face drawn on an SVG canvas, with eyebrows that animate in a repeating up-and-down motion. Built using D3.js v5, the code constructs the face by appending circle, rect, and path elements to an SVG group, and drives the animation with the `transition` API to move the eyebrow group’s `transform` attribute over two-second intervals. The mouth is rendered using the `arc` generator from d3, specifying inner and outer radii and angle parameters.

NNYCUBK201
96% match
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
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 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.

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

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

This example builds a smiley face with D3.js v5, animating its eyebrows in a repeating up-and-down motion. The face is constructed entirely from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth—all grouped and positioned via `transform` attributes. The animation uses chained `transition().duration()` calls on the eyebrow group, while static styling is applied directly to attributes like `fill` and `stroke`. The code imports `select` and `arc` from D3 and renders to a fixed 960×500 SVG canvas.

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