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 Mar 23, 2021

Created on Mar 23, 2021

Forked from Let's make a face with D3.js!

This visualization demonstrates how to build a simple smiley face using D3.js v5, with animated eyebrows that move up and down. The code uses d3-selection to append SVG elements including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. A chained transition with a two-second duration moves the eyebrows upward, then returns them to their original position, creating a blinking expression. The face is centered on a 960×500 SVG canvas using a group transform, with all shapes drawn using fundamental SVG attributes.

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 visualization demonstrates a smiley face with animated eyebrows, moving up and down in a repeating two-second cycle. The face is built using fundamental D3.js DOM manipulation, appending SVG shapes like circles, rectangles, and a path-based mouth. The eyebrows move via chained `transition()` and `duration()` calls, which shift their vertical position. The code specifically utilizes D3 v5’s `select`, `arc`, and transition methods to create the static face and its simple dynamic expression.

IIsigned

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

97% match

Loading thumbnail…

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

This visualization demonstrates a simple smiley face created entirely with D3.js, featuring animated eyebrows that move upward and then return to their original position. It uses D3 selections and the `arc` generator to draw the face’s circular head, eyes, rectangular eyebrows, and curved mouth as SVG elements. The animation is driven by chained `transition` calls with a 2000-millisecond duration on the eyebrow group’s `transform` attribute, while all shapes are positioned relative to a central group.

DDanthalakirankumar

96% match

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

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!

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

Loading thumbnail…

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

This example shows a simple smiley face built with SVG, whose eyebrows move up and down in a looping animation. The code uses D3 v5 selections to append and style the face’s circles, rectangles, and an arc-based mouth. A chained `transition().duration(2000)` on the eyebrow group animates its vertical position, shifting it up and then back. All elements are centered in a 900-by-400 SVG using a translated `<g>` container.

QQingzhi Ma

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