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

100%

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

✓ Published0🌍 Public

Last edited Feb 24, 2023

Created on Feb 24, 2023

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

This example builds a smiling face out of basic SVG shapes, including circles for the eyes and pupils, rectangles for the eyebrows, and an arc-generated mouth. Using D3 v5’s selection and transition APIs, the eyebrows animate up and down over two seconds, demonstrating fundamental DOM manipulation and data-driven styling. The face is centered and scaled based on the SVG’s width and height, with the `d3.arc` function defining both the mouth and eye arcs for a clean, geometric look.

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 smiling face built with D3.js demonstrates fundamental DOM manipulation through SVG elements, including a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back down using chained `transition` and `.duration()` calls, creating a subtle waggle effect. The example imports `select` and `arc` from D3 v5, reads the SVG's width and height attributes, and positions everything via a centered `g` group. All geometry, including eye spacing, eyebrow offsets, and the mouth's inner/outer radii and angles, is hardcoded.

NNavaneeth-Ragi

96% match

Loading thumbnail…

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

A smiling face made of SVG shapes animates its eyebrows up and down. The example demonstrates DOM manipulation with D3.js v5, using `d3.select` to target the SVG element and appending circles, rectangles, and a path for the mouth. Eyebrow movement is achieved with chained `transition().duration(2000)` calls that alternate the `transform` attribute, while the mouth uses the `d3.arc` generator to define its curved shape. The face is centered via a `g` element with a translated transform.

Rradhadevarapu

95% match

Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999

95% match

Loading thumbnail…

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

A smiling face rendered with SVG shapes uses D3.js to animate its eyebrows. The code builds the face from circles, rectangles, and an arc path, then applies chained transitions with `transition.attr` to move the eyebrows up and down. The example demonstrates fundamental DOM manipulation with D3's selection and arc methods, showing how to construct and animate a basic graphic using d3.v5.

PPrathyusha Jampala

95% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face whose eyebrows animate up and down. It shows how to select an SVG element, append grouped shapes—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—and position them using translation transforms. D3’s `transition().duration()` chains move the eyebrows vertically over two seconds, while the mouth uses `d3.arc()` to create a curved smile. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG.

Ddhanushkar006

95% match

Loading thumbnail…

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

This example builds a smiling face with D3.js, using SVG primitives like circles and rectangles to depict the head, eyes, and eyebrows. The code animates the eyebrows by chaining `transition().duration(2000)` calls to move them up and down. The mouth is drawn with a D3 `arc` shape, and all elements are grouped and transformed to be centered within the SVG.

DDanyalMazhar

95% match

Loading thumbnail…

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

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` to append SVG circle, rectangle, and path elements for the face, eyes, eyebrows, and mouth. Animated eyebrows are implemented with chained `transition.attr` calls that alternate the vertical position of a group containing two rectangles. The mouth is generated using the `d3.arc` helper with specified inner and outer radii and angle ranges.

MMadan05101998

95% match

Loading thumbnail…

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

A D3.js v5 example constructs a smiling face entirely from SVG shapes, including a circle head, eyes, and an arc-based mouth. The animation focuses on the eyebrows, which move up and down via a chained `transition().duration(2000)` call, demonstrating fundamental DOM manipulation. The code uses D3's `select` to target the SVG element and `arc` to generate the mouth's path, with all facial features positioned relative to the canvas center via SVG group translations.

Mmd-Junaid

95% match