Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
MMeghanaArepalli
Last edited Feb 20, 2022
Created on Feb 20, 2022

This fork of “Let's make a face with D3.js!” builds an SVG smiley face with animated eyebrows using fundamental DOM manipulation. The face includes yellow circular head, two eyes, a nose, and a mouth, all positioned via SVG attributes and transforms within a centered group. The code uses D3 v5’s `select` and `arc` functions to create the facial features, with eyebrows drawn as arc paths that can shift position. A YouTube tutorial in the README supports learning the underlying D3 concepts.

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 fork of “Let's make a face with D3.js!” builds a yellow smiley face from SVG shapes, including eyes, eyebrows, a mouth, nose, ears, and hair. D3.js v5 selections append circles, rectangles, paths, and ellipses to an SVG canvas, while the `d3.arc` generator creates the curved mouth. A two-stage transition animates the eyebrow group’s vertical position, moving the eyebrows up and down over two seconds per cycle using `transition.attr`. The face is centered via a translated `<g>` element, and the code relies on D3’s `select` and `arc` imports.

Ssaiyogesh9911@gmail.com
95% match
Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The eyebrows animate upward and then back down over four seconds using chained `transition` calls on a group element. The code constructs the face with D3 selections, `arc` for the mouth path, and transitions that modify the `transform` attribute of the eyebrow group.

SSadafNaseem
94% match
Loading thumbnail…

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

A D3.js example builds a yellow smiley face with animated eyebrows using fundamental DOM manipulation. The face is drawn with SVG circles for the eyes and a path created via the `d3.arc()` generator for the mouth. Eyebrow rectangles transition vertically upward and back down over two 2-second intervals using chained `transition()` calls. The code selects the SVG element, applies transforms to center the face, and uses static data attributes like `eyeSpacing` and `eyeRadius` to position features, rendering entirely in the browser with d3.v5.

NNiharikapabbathi08
94% 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
94% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG, with the face constructed from D3.js v5 primitives including `select`, `append`, `arc`, and attribute setters. The eyes and mouth are drawn as circles and an arc path, while the eyebrows are rectangles that move up and down using chained `transition().duration()` calls. The code demonstrates fundamental DOM manipulation by building the figure from scratch and applying a two-second animated transform to the eyebrow group.

EEeshwarReddy
94% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG, with the face constructed from D3.js v5 primitives including `select`, `append`, `arc`, and attribute setters. The eyes and mouth are drawn as circles and an arc path, while the eyebrows are rectangles that move up and down using chained `transition().duration()` calls. The code demonstrates fundamental DOM manipulation by building the figure from scratch and applying a two-second animated transform to the eyebrow group.

EEeshwarReddy
94% match
Loading thumbnail…

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

This fork of “Let’s make a face with D3.js!” builds a yellow smiley face in an SVG canvas using D3 v5. It demonstrates fundamental DOM manipulation by selecting the `svg` element, appending a group, and composing circles and rectangles for eyes, a path-arc mouth, and rectangular eyebrows. The code uses `d3.select` and `d3.arc` to shape the smile, then animates the eyebrow group with `transition.attr` over two seconds, moving it up and down to create a lively facial expression.

HHuy Truong
94% match
Loading thumbnail…

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

This fork of the "Let's make a face" tutorial builds a yellow smiley face with animated eyebrows using D3.js v5. The example demonstrates fundamental SVG DOM manipulation and transitions. A group element centers the face, while circles form the eyes and a path, created with the d3.arc generator, draws the mouth. D3 transitions, chained over two seconds each, move the eyebrows up and down repeatedly, showing how to animate SVG attributes without explicit JavaScript timers.

Jjakenachlas
94% match