Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
JJuyeonee
Last edited Jul 19, 2021
Created on Jul 18, 2021

A yellow smiley face drawn with SVG circles and an arc path appears centered in a 960-by-500 viewport. The eyebrows, rendered as rectangles, repeatedly move up and down via chained `transition().duration(2000)` calls, demonstrating fundamental DOM manipulation with D3 v5. The code uses `select`, `arc`, `attr`, and `append` to build the face, with static positioning from hardcoded numeric constants rather than external data. The example is a fork of a tutorial, embedded as an interactive animation.

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

A yellow smiley face with animated eyebrows and a shifting mouth is drawn as SVG elements using D3.js v5. The code builds the face by appending circles, rectangles, and an arc path to a group, then applies chained `transition` calls with a 2000-millisecond duration to move the eyebrows upward and alter the mouth’s end angle. It uses D3’s `select`, `arc`, and attribute manipulation to demonstrate fundamental DOM updates and transitions without any data source.

YYuqi Tang
96% match
Loading thumbnail…

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

A yellow smiley face drawn with SVG shows off basic D3.js DOM manipulation: the code appends circles for eyes and a mouth, uses a path with `d3.arc` for the smile, and animates the eyebrows with repeated `transition.attr` calls that shift their vertical position over two seconds. The face is centered by translating a grouping element, with fixed numeric constants for eye spacing, radius, and eyebrow sizing. The animation loops once, lifting the eyebrows upward then returning them, demonstrating chained transitions on the same selection.

DDimas Sudjito
96% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js. The face is built using SVG shapes including circles for the eyes, a path created with `d3.arc` for the mouth, and rectangles for the eyebrows. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down repeatedly, while the static face elements remain centered via a translated `<g>` element. The code imports `select` and `arc` from the D3 v5 library and renders entirely in SVG within a 960×500 viewport.

MManideepChakilam
96% match
Loading thumbnail…

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

A D3.js animation displays a yellow smiley face whose eyebrows move up and down in a repeating loop. The face is constructed from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path for the mouth—positioned within a group. The animation uses the `transition` API to smoothly interpolate the eyebrow group's `transform` attribute over two-second intervals between two vertical offsets. The code demonstrates fundamental DOM manipulation, importing `select` and `arc` from the D3 library to build and style the elements.

Jjacychu
96% match
Loading thumbnail…

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

A D3.js animation displays a yellow smiley face whose eyebrows move up and down in a repeating loop. The face is constructed from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path for the mouth—positioned within a group. The animation uses the `transition` API to smoothly interpolate the eyebrow group's `transform` attribute over two-second intervals between two vertical offsets. The code demonstrates fundamental DOM manipulation, importing `select` and `arc` from the D3 library to build and style the elements.

Jjacychu
96% match
Loading thumbnail…

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

A yellow smiley face, drawn with SVG circles and an arc path, demonstrates basic D3.js DOM manipulation. The face’s rectangular eyebrows animate by moving up and down through two chained `transition().duration(2000)` calls on a group element. The code uses `d3.select`, `d3.arc`, and `d3.transition` from D3 v5 to build and animate the static face, with no external data source.

JJasvitha Allamsetty
96% match