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

100%

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

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

Forked from 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.

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

A smiley face drawn with SVG shapes animates its eyebrows, moving them up and down. The example demonstrates basic D3.js DOM manipulation by selecting the SVG element, appending groups, and building the face from circles, rectangles, and an arc path. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` methods to create the two-second eyebrow animation loop, with dimensions defined via attributes on the root SVG.

AAbin

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

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

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!

A smiley face rendered in SVG uses D3.js v5 to animate its eyebrows in a repeating up-and-down motion. The face is built by appending SVG circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. D3 transitions move the entire eyebrow group by changing its `transform` attribute over two-second intervals. The code imports `select` and `arc` from D3, and the animation runs automatically on page load.

Jjohncoder21

95% match