Lets make a face with D3.js

100%

Lets make a face with D3.js

✓ Published1🌍 Public

Last edited Oct 6, 2019

Created on Oct 6, 2019

A yellow SVG face is drawn with D3.js v5, featuring a circular head, two eyes, eyebrows, and a mouth created using `d3.arc`. The eyebrows animate vertically via `transition().duration()`, shifting downward over two seconds. The face is centered using an SVG group transform, with eye positions spaced by fixed pixel offsets. The code uses `select`, `arc`, and SVG shape elements like `circle`, `rect`, and `path`. Population data in `data.csv` is loaded but not rendered in the visualization.

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 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 face rendered in SVG displays yellow circular head, eyes, eyebrows, and a mouth. D3 v5 code builds the face using `d3.select`, `d3.arc` for the mouth path, and appended `circle` and `rect` elements. Eyebrows animate with `transition.duration()`, moving them downward and back over two seconds each way, while the head and features remain static against a dark blue background.

GGeolffrey S Mena

93% match

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

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

93% match

Loading thumbnail…

Lets make a face with D3.js

A yellow circle forms a face with black eyes, rectangular eyebrows, and a semicircular arc mouth rendered as SVG shapes. The right eyebrow animates between two vertical positions using `transition().duration()`, while the mouth uses the `arc()` generator from d3-shape with specified inner and outer radii. The code imports `select` and `arc` from D3 v5, appends elements to an SVG canvas sized 960 by 500, and centers the face using fixed pixel coordinates. No external data is loaded; all shapes are directly defined in the script.

Llamiyaa

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

93% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and an arc-shaped mouth. The eyes and eyebrows are simple SVG circles and rectangles, while the mouth uses a path generated by D3's `arc` function. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds each way. The visualization is built entirely with D3 v5, using its `select` and `arc` modules to render and manipulate SVG elements.

Ffredferramenta

93% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with eyes, eyebrows, and a mouth is drawn using D3.js v5. The eyebrows animate upward and back down with chained `transition().duration()` calls. The visualization demonstrates basic SVG shape creation and transformation, using D3 selections, `arc()` for the mouth, and `attr()` to position elements. The face is centered by translating a group element based on the SVG’s width and height, with all shapes rendered in SVG.

RRod Potter

93% match