Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published1🌍 Public
PPiotrekW2
Last edited Feb 19, 2019
Created on Feb 19, 2019

A yellow face with eyes and eyebrows is drawn in SVG using D3.js. The eyebrows animate up and down through chained `transition` and `duration` calls, while the mouth alternates between a frown and a smile using `setTimeout` to invoke a custom `mouthFunction` that redraws an arc path via D3's `arc` generator. The code uses `select`, `append`, and `attr` to build the face from primitive shapes, and `exit` and `remove` to replace the mouth path.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

Nnicfavfar
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn and animated using D3.js v5. The code builds the face with SVG shapes, positioning elements relative to the center of a 960×500 canvas. Eyebrows rise and fall repeatedly via chained `transition().duration(2000)` calls on the parent group. The mouth is generated using the `d3.arc()` helper with specified inner/outer radii and angular span, while the `select` API attaches elements to the SVG root.

PpilafGB62
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301
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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined eyes and an animated mouth is drawn using D3.js v5. The face is centered via an SVG group transform, with circles for the eyes and an arc-based path for the mouth. Eyebrows are rectangles that transition vertically twice over two seconds using D3's `transition().duration()`. The code uses `d3.select`, `d3.arc`, and SVG attributes like `attr('d', ...)`, rendering entirely in SVG with no external data source.

Ddanielchamone
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn using D3.js v5. The face consists of a circle for the head, two eyes, rectangular eyebrows, and a smile arc. The eyebrows animate up and down over two-second intervals using D3's `.transition()` and `.attr()` methods. The application uses `d3.select` to target the SVG element and `d3.arc` to generate the mouth path based on inner and outer radii and start and end angles.

DDavidHierholz
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau
95% match
Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780
95% match