Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published5🌍 Public

Last edited Nov 14, 2019

Created on Oct 17, 2019

A yellow face built from SVG shapes is rendered centered in a 960x500 viewport. D3 selections create circles for the eyes and an arc-generated path for the mouth, while rectangular eyebrows animate vertically via chained `transition().duration()` calls on a group element. The code imports `select` and `arc` from d3 v5, using SVG attributes like `cx`, `r`, and `transform` to compose the figure.

AI-generated description

An example showing the capabilities of VizHub.

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

This example draws a yellow cartoon face in SVG, centered within a 960x500 viewport, using D3’s `select` and `arc` functions. The face features black circular eyes, rectangular eyebrows, and a mouth generated from an arc path. An animation demonstrates D3's `transition` method, which moves the eyebrows upward and back down over two two-second intervals. All shapes are built with D3 selections, and the SVG elements are positioned via translation and attribute assignments.

MMauradion

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a face with two eyes, animated eyebrows, and a smile, all built using D3.js v5 with SVG rendering. The code uses `d3.select`, `d3.arc`, and `selection.transition` to draw the head, eyes, mouth, and to animate the eyebrows up and down over two seconds. The face is centered on a 960×500 SVG canvas, with all shapes positioned via translations and hardcoded numeric offsets for features like eye spacing and eyebrow dimensions.

CCristian Pintor

95% match

Loading thumbnail…

Let's make a Face with D3.js

A yellow SVG face is drawn with D3.js, centered in a 960×500 viewport and constructed from circles, rectangles, and an arc for the mouth. D3 transitions (`.transition().duration(2000)`) repeatedly raise and lower the eye-brow rectangles over four seconds, creating a simple animated expression. The code imports `select` and `arc` from D3 v5, uses d3.arc to build the mouth path, and sets all positions via SVG attributes.

Jjerz-0788

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow cartoon face from SVG shapes using D3.js v5. The face is centered via a group transform, with circles for the eyes and an arc-generated path for the mouth. D3 transitions animate the eyebrows upward and back over two seconds, while the static shapes render in a 960×500 SVG canvas. The code imports `select`, `arc`, and `rect` from the D3 library.

Jjahnueldorelus

95% match

Loading thumbnail…

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.

HHonza Cahlík

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow face with eyes, animated eyebrows, and a wide mouth is drawn using D3.js v5. The SVG elements are positioned with `d3.select` and attribute setters, while the mouth is generated using the `d3.arc` path generator. Eyebrow rectangles animate vertically via chained `transition().duration()` calls, moving up and down over two seconds. The code imports only `select` and `arc` from D3, applies transforms to group elements, and renders entirely with SVG shapes.

MmangoJ0106

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

94% match