Skip to main content
SimilarExport ZIP
100%

Let's make a face with d3.js!

✓ Published4🌍 Public
Aarun-subba
Last edited Aug 21, 2020
Created on Aug 21, 2020

A yellow SVG face is drawn with d3.js, featuring two eyes, animated eyebrows that move up and down via chained transitions, and a smiling mouth with a tongue created using d3.arc. The code uses d3.select to attach elements to an SVG canvas, d3.arc for path generation, and transition().duration() to animate the eyebrow transforms over two seconds.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn with D3.js v5, featuring two eyes, animated eyebrows, and a mouth created using the `d3.arc` generator. The face is centered within an SVG canvas, with facial features positioned via translation transforms. Eyebrows animate upward and downward using chained `transition` calls with a 1500-millisecond duration, while the mouth is rendered as an arc path between specified angles. The example demonstrates fundamental SVG shape creation and coordinate manipulation in D3.

Ddtdenver
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 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.

PPiotrekW2
95% match
Loading thumbnail…

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

DDan Henri
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
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
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263
94% match