Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Kkatpyt
Last edited Nov 5, 2021
Created on Nov 5, 2021

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.

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

A smiling face built entirely with SVG elements demonstrates basic D3.js DOM manipulation and animation. The code uses `d3.select` to create circles for the eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth, all within a centered group. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls on the group's transform. Rendered at 960×500, the face is drawn with yellow fill and black strokes, showing how D3 v5 handles simple geometric shapes and timed state changes.

Jjaredzhou
95% match
Loading thumbnail…

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

An animated smiley face rendered in SVG demonstrates core DOM manipulation with D3.js v5. The face, built from circles, rectangles, and a path, features eyebrows that animate by chaining `transition().duration()` calls to shift their vertical position over time. The code constructs the facial features using D3’s `select` and `append` methods, with the mouth drawn via the `arc` function to generate a curved path. The example highlights basic D3 transitions and coordinate transformations within a fixed 960×500 SVG canvas.

Mmomopng
95% match
Loading thumbnail…

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

A smiley face rendered in SVG uses D3.js v5 to animate its eyebrows in a repeating up-and-down motion. The face is built by appending SVG circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. D3 transitions move the entire eyebrow group by changing its `transform` attribute over two-second intervals. The code imports `select` and `arc` from D3, and the animation runs automatically on page load.

Jjohncoder21
95% match
Loading thumbnail…

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

A smiling face is drawn with D3.js, rendered as SVG shapes, with eyebrows that animate by moving up and down. The code uses D3’s `select` and `append` to build the SVG hierarchy, and the `transition().duration(2000)` API to create the two-second eyebrow movement. The face is composed of circles for the eyes and head, and a path generated with D3’s `arc` function for the mouth, all positioned using SVG transforms.

SSuzie1022susu
95% match
Loading thumbnail…

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

A forked D3.js v5 example renders a smiley face in SVG with animated brows, a hat, and a mouth that bounce between positions over repeated transitions. The code uses `d3.select`, `d3.arc`-less path strings, and `transition.attr` to move circles, rectangles, and ellipses. It demonstrates fundamental DOM manipulation and chained transitions on SVG elements, with the face’s components like eyes and eyebrows spaced via explicit coordinates rather than a data-binding layout.

SSanjib Paudel
94% match