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

100%

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

✓ Published0🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

Forked from Let's make a face with D3.js!

A yellow smiley face fills an SVG canvas, with animated eyebrows that move up and down via chained transitions. The face is built entirely with D3.js v5 selections and shape generators, using `select` for DOM manipulation, `arc` for the mouth path, and SVG `circle` and `rect` elements for the face, eyes, and brows. The code computes positions from the SVG’s dimensions and centers a group with a translate transform. No external data is used; the visualization demonstrates fundamental D3 update and transition patterns.

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 Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.

NNavaneeth-Ragi

96% match

Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas, featuring two eyes and a mouth created with D3.js's `select` and `arc` functions. The face centers on a group, with circles for the eyes and a path for the smiling mouth. Eyebrows, rendered as rectangles, animate vertically over two seconds using chained `transition` calls, moving up and then back down. The SVG dimensions are read from the element, and all shapes are styled with fills and strokes.

Ggunasindhuja

96% match

Loading thumbnail…

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

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, a mouth, and rectangular eyebrows. The face is centered using a `<g>` transform, with circles and a path generated by the `d3.arc()` function composing the features. Animated eyebrows move up and down repeatedly via chained `transition()` calls that adjust their `attr('transform')` over two-second durations. The code demonstrates fundamental DOM manipulation and transitions using D3 v5 selections, specifically `select`, `append`, `attr`, and `transition`.

Rrohinikotha

96% 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 Fork of Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Ssnehareddygurram

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 is drawn in an SVG canvas, with animated eyebrows that move up and down repeatedly. The example demonstrates fundamental DOM manipulation with D3.js, using a simple data-free composition of SVG shapes: circles for the face and eyes, rectangles for eyebrows, and a path created with the `d3.arc` generator for the mouth. D3's `transition` method triggers the eyebrow animation, while the `select` and `append` APIs build the hierarchical SVG structure centered on the canvas.

AAsimali39

96% match

Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa

96% match