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 Feb 18, 2022

Created on Feb 18, 2022

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

Built with D3.js v5, this animated SVG face demonstrates fundamental DOM manipulation using selections, transitions, and shape generators. The coral circle head, green-outlined eyes, eyebrows, and arc-based mouth are appended and styled via D3 methods like `select`, `append`, `attr`, and `transition`. The eyebrows animate through a chained `transition().duration()` sequence, moving up 90 pixels and back over 20 seconds. The `arc` generator defines the mouth’s path from inner and outer radii, while SVG attributes control geometry and stroke styling throughout.

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 playful SVG face built with D3.js v5 shows a green circle with movable eyebrows, red ears, white teeth, and a frowning mouth. The code demonstrates fundamental DOM manipulation using `d3.select` and `d3.append` to construct shapes, while `transition()` animates the eyebrows upward and back down over four seconds. An `arc()` generator creates the mouth path, and rectangular teeth are bound to data via `selectAll().data().enter()`.

Bbhanuprasadk19

93% match

Loading thumbnail…

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

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

NNavaneeth-Ragi

93% match

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

93% match

Loading thumbnail…

Fork of 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.

JJasvitha Allamsetty

93% match

Loading thumbnail…

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

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Jjlspangl

93% 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

93% match

Loading thumbnail…

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

This animated SVG face uses D3.js v5 to demonstrate fundamental DOM manipulation. A yellow circle forms the head, with black-outlined eyes and a path drawn mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition()` calls with 2000-millisecond durations. The example shows how to build and move SVG elements dynamically, with a black page background set via D3’s selection style method, and relies on basic attribute setting for positioning.

SSANEEM MOHAMMAD

93% match

Loading thumbnail…

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

This interactive visualization displays a smiling face built with SVG shapes, whose eyebrows slide upward and then return in a repeated motion. The code uses D3.js v5 to select the SVG canvas, compute dimensions, and append a green circle as the head, along with eyes, rectangular eyebrows, and an arc-based mouth. D3’s `transition()` and `duration()` methods drive the eyebrow animation, while `select` and `arc` are explicitly imported from the library. The example demonstrates fundamental DOM manipulation and chained transitions in a minimalist, animated composition.

SSaivignesh-9176

92% match