Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
FFerasMorsi
Last edited Jan 29, 2023
Created on Jan 29, 2023

A yellow smiley face is drawn centered in an SVG canvas using D3.js v5. The face features fixed eyes and a mouth, while its eyebrows animate by moving up and down via chained `transition` calls. The code constructs the face with D3 selections and shape primitives, including `circle` elements for the eyes and an `arc` generator for the mouth. Eyebrows are `rect` elements that translate vertically over time, demonstrating basic DOM manipulation and animation with D3 transitions.

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 is drawn on an SVG canvas, with two eyes and a mouth created using D3's `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down repeatedly via chained `transition` calls with a 2-second duration each. The code uses D3 v5 selections to append circles, rectangles, and a path, and stores numeric layout variables for spacing and offsets.

Aanmarsan
97% match
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas as a circle with eyes, eyebrows, and a mouth, built by manipulating DOM elements with D3.js v5. The code uses `select`, `append`, and `attr` to construct the shapes, and `transition` to animate the eyebrow group moving down and back up over a 4-second loop. The mouth is a path generated with the `arc` function, creating a curved shape from specified angles.

Hhunianhang
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
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 two eyes and a curved mouth, and its eyebrows animate by moving upward and then back down in a loop. The example demonstrates fundamental D3.js v5 DOM manipulation using SVG elements like `circle`, `rect`, and `path`. The code uses `select` and `arc` from D3, and the animation is driven by chained `transition().duration(2000)` calls that alter the `transform` attribute on the eyebrow group.

Aalvasilvao
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
96% match
Loading thumbnail…

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

A yellow smiley face appears centered in an SVG canvas, built entirely with D3.js v5 shape and selection APIs. The code uses `d3.arc` to draw the mouth, while circles form the eyes and rectangles create the eyebrows. Two chained `transition()` calls animate the eyebrow group upward and then back to its original position over four seconds, demonstrating basic DOM manipulation and animation through D3’s data join and transition system.

Yyuan20001224
96% match
Loading thumbnail…

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

This example shows a yellow smiley face drawn with D3.js v5, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a repeated transition. The face is constructed using SVG primitives like `circle`, `rect`, and `path` with the `d3.arc` shape generator for the mouth. The eyebrows animate via chained `transition` calls with a 2-second duration each, translating the eyebrow group vertically. The code demonstrates fundamental DOM selection and manipulation using `d3.select` and `d3.append` on an SVG canvas.

FFelipe Oyarzún Ramos
96% match