Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
Ppaul4952233@gmail.com
Last edited Sep 18, 2023
Created on Sep 18, 2023

This example renders a yellow smiley face with animated eyebrows using D3.js. It builds the face with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth—centered via a translated group. The code applies chained `transition().duration(2000)` calls to move the eyebrows up and down repeatedly. It uses `select` to access the SVG element and `arc` from the `d3` module to generate the mouth’s path, with dimensions and positions hardcoded. The animation runs on a 960×500 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!

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

YYUTONG FENG
97% match
Loading thumbnail…

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

This example shows a yellow smiley face centered in an SVG canvas, with two eyes and a mouth formed by an arc path, while its eyebrows animate by moving upward and then back down. Built with D3.js v5, the code uses `d3.select`, `svg.append`, and `.attr` to construct the face, and `transition().duration(2000)` to create the eyebrow motion. The face is drawn using SVG shapes, including circles for the eyes and a path generated by `d3.arc` for the mouth, with dimensions fixed to a 960×500 viewport.

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

A smiley face built with D3.js animates its eyebrows up and down in a looping transition. The SVG face consists of circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. Code uses D3 selections, `transition().duration()`, and attribute manipulation to shift the eyebrow group’s vertical position. The yellow head and black outlines are rendered directly via SVG attributes, with no external data source.

KKCharoenkwan
97% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

Nnofferdahl
97% match
Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates basic SVG manipulation and animation with D3.js. The face is drawn using D3 selection methods to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is created using chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports specific functions like `select` and `arc` from the D3 v5 library and renders entirely as SVG within a fixed-size viewport.

Ddmpiq
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

DDeclan Naughton
97% match
Loading thumbnail…

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

This example builds a yellow smiley face with D3.js and animates its eyebrows upward in a repeating two-second cycle. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition` calls to move the eyebrow group’s `transform` attribute. Circles form the eyes and a yellow circle with a black stroke forms the head, all rendered in SVG. The animation demonstrates basic DOM manipulation and timed transitions with D3 v5.

CChromosin13
96% match