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 Feb 23, 2023

Created on Feb 23, 2023

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

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!

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel

97% 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

97% 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 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 smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall, creating a playful expression. The example demonstrates fundamental D3.js DOM manipulation by using `select` and `append` to construct circles for the face and eyes, `rect` elements for eyebrows, and an `arc` generator for the mouth. Eyebrow motion is achieved through chained `transition` calls on a group element, shifting its vertical position over two-second intervals. The code uses D3 v5 and relies on SVG attributes for positioning and styling.

Mmanasanimmagadda13

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 animates a simple smiley face rendered in SVG, with eyebrows that sequentially lift and lower to create a facial expression. It demonstrates fundamental DOM manipulation by building the face from basic shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—using D3.js v5 selection and attribute methods. The eyebrow movement is driven by chained `transition().duration()` calls, which animate the `transform` attribute over two seconds in each direction. The code uses `d3.select`, `d3.arc`, and `append` to construct the scene within a 960×500 viewport.

Cchanipon

96% match

Loading thumbnail…

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

A smiley face built with SVG animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by appending circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move via chained `transition` calls that repeatedly offset their vertical position. The code imports `select` and `arc` from the D3 v5 library and renders entirely in an SVG container.

AAkash Santosh Kuskar

96% match