Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
EEbenizerR
Last edited Dec 13, 2021
Created on Dec 13, 2021

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.

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 built with D3.js animates its eyebrows upward and downward in a looping transition. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth—within a centered group. The eyebrows move via chained `transition` and `.attr` calls over a two-second duration, demonstrating fundamental DOM manipulation in D3 v5.

EErikaLozada
97% match
Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
97% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. The face is constructed using SVG elements, including a yellow circle for the head, two circles for eyes, and an arc-generated mouth. The eyebrows, rendered as rectangles, move up and down using chained `transition().duration()` calls to create a looping animation. The code uses D3 v5’s `select`, `arc`, and transition APIs to handle element creation and animation.

DDanyalMazhar
97% match
Loading thumbnail…

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

This example demonstrates a smiley face whose eyebrows animate upward and downward in a looping motion. Using D3.js v5, the code constructs the face from SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with `d3.arc()` for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s vertical transform. All elements are appended to a centered `<g>` within an SVG canvas, with no external data source.

Ssolution365
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation and transitions. The face is built by appending SVG circles for the eyes and face, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Using `.transition().duration(2000)`, the eyebrow group shifts vertically down and back up, creating a repeated motion. The code explicitly imports `select` and `arc` from the D3 v5 library.

44charan4
97% match
Loading thumbnail…

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

This example demonstrates how to build a smiley face using D3.js and animate its eyebrows. The code constructs SVG shapes including a yellow circle for the face, black circles for the eyes, and a mouth drawn with D3's `arc` function. It then uses D3's `.transition()` and `.duration()` methods to create a two-second animation that moves the eyebrows up and down. The example specifically showcases fundamental DOM manipulation and animation capabilities within D3.js version 5.

Eeinsko
96% match
Loading thumbnail…

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

This example demonstrates how to build a smiley face using D3.js and animate its eyebrows. The code constructs SVG shapes including a yellow circle for the face, black circles for the eyes, and a mouth drawn with D3's `arc` function. It then uses D3's `.transition()` and `.duration()` methods to create a two-second animation that moves the eyebrows up and down. The example specifically showcases fundamental DOM manipulation and animation capabilities within D3.js version 5.

Eeinsko
96% match