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 Jun 1, 2021

Created on Jun 1, 2021

Forked from 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.

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 smiling face built with SVG elements responds to a looping two-second animation that raises and lowers its rectangular eyebrows. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG canvas, appending grouped circles for eyes, a mouth path created with `d3.arc`, and applying `transition` calls to shift a `g` element’s transform attribute. It uses D3 v5 with import statements for `select` and `arc`.

Vvanseveren.m@northeastern.edu

95% match

Loading thumbnail…

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

A smiling face built with D3.js v5 uses SVG circles and a path to render its head, eyes, and mouth. The eyebrows are rectangles that animate up and down using chained `transition` calls with a two-second duration each. The visualization demonstrates core DOM manipulation by selecting an `svg` element and appending groups and shapes based on fixed pixel dimensions. The code imports `select` and `arc` from the D3 library to create the face and generate the mouth's curved path.

Kkatpyt

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

HHarishma Nallala

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

This example demonstrates a smiling face drawn with D3.js v5, using SVG shapes and a continuous animation to move its eyebrows. The code constructs the face from basic SVG primitives, including circles for the eyes and a path generated by the `d3.arc` API for the mouth. Eyebrow movement is achieved by chaining `transition().duration(2000)` calls, which animate the `transform` attribute of a group element back and forth. The visualization runs on an 960x500 canvas, centering the facial features with hardcoded offsets and using D3's DOM selection and manipulation functions.

DDmytro Tyshchenko

95% match

Loading thumbnail…

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

A smiling face built with SVG elements appears on a pink circle with a yellow stroke, featuring eyes, nostrils, teeth, and a mole. Using D3.js v5, the code constructs the face with `select` and `arc`, positioning shapes via `attr` transforms. Eyebrows animate through chained `transition().duration(2000)` calls, moving and rotating independently in a looping motion. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 transitions.

CChi Aghaizu

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

95% match