Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Dec 21, 2020

Created on Dec 21, 2020

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

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel

96% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH

96% match

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face constructed with SVG elements in D3.js demonstrates chained transitions. The code builds a centered group containing a circle for the head, two circles for eyes, and rectangles for eyebrows, all with fixed coordinates and styling from CSS classes. A mouth uses the `d3.arc()` path generator with specified angles. The eyebrows animate through a `transition.attr()` sequence, moving down and up over two one-second intervals. The example imports `select` and `arc` from D3 v7 and renders entirely as static SVG shapes with programmed motion.

JJadeITNT

96% match

Loading thumbnail…

Let's make a face with D3.js

This example renders a simple, animated face from basic SVG shapes. A yellow circle forms the head, with two dark circles for eyes and rectangular eyebrows that move up and down. The mouth is drawn as an arc using the D3 `arc` function. The animation is created with D3's `.transition()` and `.duration()` methods, which are used to move the right eyebrow. The entire composition is centered and built within a single `<g>` group using D3's `select` and `append` functions.

Jjcksnm

96% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, eyebrows, and a mouth forms a simple face in an SVG canvas. The code uses D3 v5 selections to build the shapes, with `d3.arc` generating the mouth’s path. A `transition` applies a two-second upward and downward movement to the eyebrow group, animating the face without any data input. All elements are centered via a translated `<g>` group, and the rendering relies strictly on SVG attributes and D3’s transition system.

Ffbudwill

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, eyebrows, and a smile is drawn entirely with D3.js v5 SVG primitives, including `circle`, `rect`, and an `arc()` path for the mouth. The face is centered within an SVG using a translated `g` group, and the eyebrows animate upward and back down via chained `transition().duration()` calls. The geometry uses constants for spacing and offsets, and the code demonstrates selection, attribute setting, and the `arc` generator from the `d3` module.

GGPOAdmin

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can construct a simple animated face using fundamental SVG elements. A yellow circle forms the head, with two circles for eyes and a path drawn using the `arc` generator for the mouth. The code uses `d3.select` and `d3.append` for DOM manipulation, while the `transition` method animates the eyebrows upward and back over two seconds each way. The face is centered via a group transform, and all shapes are rendered as SVG with hardcoded attributes.

MMargarita Chernetski

96% match