Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
QQingzhi Ma
Last edited Nov 15, 2021
Created on Nov 15, 2021

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.

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

Ppangaotata
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 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
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 drawn with D3.js animates its eyebrows bobbing up and down in a looping transition. The example demonstrates basic SVG shape creation and DOM manipulation using D3 selections, appending circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The `transition()` method with a 2000-millisecond duration moves the eyebrow group vertically, then reverses the transform to create the oscillation. It uses D3 v5's `select` and `arc` APIs.

AAsrar Al Qassem
95% match
Loading thumbnail…

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

This example shows a D3.js smiley face with animated eyebrows that move up and down in a looping transition. Built with SVG, the face consists of a yellow circle, two eye circles, two rectangular eyebrows, and an arc-based mouth. Using D3 v5’s `select` and `arc` APIs, the code appends shape elements to an SVG canvas and animates the eyebrow group with chained `transition().duration()` calls, toggling its vertical offset every two seconds.

EEbenizerR
95% match