Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDimas Sudjito
Last edited May 19, 2021
Created on May 19, 2021

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.

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 SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
97% match
Loading thumbnail…

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

A yellow smiley face with blinking eyebrows is rendered as an SVG using D3.js v5. The face is centered via a group transform, with circles for eyes, rectangles for brows, and a path built with the `arc` generator for the mouth. Two chained `transition` calls on the eyebrow group animate its vertical position, moving the brows up and down over two-second intervals. This demonstrates fundamental DOM manipulation and chained transitions in D3.

VVis Ivaturi
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

LLG0498
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 rendered in SVG demonstrates D3.js DOM manipulation and animation. The code appends circles for the eyes, red nose, and arc-generated mouth, while rectangles serve as eyebrows that move via chained `transition.attr` calls over two-second intervals. Using `d3.select` and `d3.arc`, it builds the face from static shapes then animates the eyebrow group’s transform, showing basic enter-append and transition patterns with D3 v5.

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

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 rendered as an SVG reacts to a repeating transition, with both eyebrows moving up and down in sync. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, and drawing shapes like circles, rectangles, and an arc for the mouth. It uses `d3.select` and `d3.arc`, with `transition().duration()` to animate the eyebrow positions over 600-millisecond intervals. The face is centered using SVG transform attributes, and the code runs with d3.v5.

Iiidalindh
97% match