Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Pphongbui81062
Last edited Dec 5, 2019
Created on Dec 5, 2019

A simple yellow circle with eyes and an arc-based mouth forms a cartoon face in SVG. The eyebrows animate upward and back down using chained `transition()` calls with a 2-second duration each. The code builds the face with D3 v5 selections, positioning elements via `translate`, and constructs the mouth with the `arc()` helper, specifying inner and outer radii alongside start and end angles. The animation runs once on load within the fixed 960x500 viewport.

AI-generated description
MIT Licensed

Similar vizzes

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

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple cartoon face from SVG shapes, including a yellow circular head, eyes, eyebrows, and a mouth. The face is centered within the viewport using a translated group element. The eyebrows animate upward and back down using chained `transition.duration` calls on a group’s transform attribute. The code leverages D3 v5’s `select` and `arc` helpers, the latter generating the mouth path from inner and outer radii and angular extents. Static shapes are drawn with circles and rectangles appended to SVG groups.

Pphongbui81062
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle forms a smiling face with two eyes, animated eyebrows, and an arc-shaped mouth built from SVG shapes. The example demonstrates D3 v5 selections and transitions, using `d3.select` and `d3.arc` to construct the geometry. Eyebrows move up and down via chained `transition().duration()` calls, creating a simple looped animation. All elements are centered within an SVG canvas using a translated group, and the code relies on D3's data-join-free imperative style for direct DOM manipulation.

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

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan
95% 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 in SVG using D3.js v5. The eyebrows animate upward and back down over two seconds via chained `transition()` calls with `duration(2000)`. The code uses `d3.select`, `d3.arc`, and attribute manipulation to construct the face, with coordinates centered on an SVG canvas.

SShawn Kearney
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