Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
SShabani Muswamba
Last edited Apr 23, 2020
Created on Apr 23, 2020

A smiling face is drawn on a yellow circle using D3.js v5, with animated eyebrows that move up and down. The code constructs the face using SVG primitives like circles for the eyes and a path for the mouth, defined by an arc with specified radii and angles. The eyebrows are rectangles that animate their vertical position over time using the `transition` API, demonstrating smooth movement with varying durations. The example runs in a React framework but uses plain D3 for rendering and animation.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a curved mouth is built using D3.js v5 and rendered as SVG. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the rectangular eyebrows vertically. Static attributes set the face and eye positions, while the eyebrows animate in opposing time sequences. The example runs in a React framework and draws on a 960×500 SVG canvas.

SShabani Muswamba
96% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face is drawn as a yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth, all rendered in SVG. The animation uses D3 transitions to move the eyebrows up and down over two seconds. The code leverages `d3.select`, `d3.arc`, and SVG `circle`, `rect`, and `path` elements within a fixed 960×500 viewport, with the face centered via a group transform.

NNkwachi Abel
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Llittlenanopichu
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43
95% match
Loading thumbnail…

Lets make a face

A smiling face is drawn with D3.js in an SVG, featuring a yellow circle head, two eyes, and a mouth arc. The code uses basic SVG shapes like `circle` and `rect`, and the `d3.arc()` function to generate the mouth path. The eyebrows are animated with chained `transition()` calls, moving up and down over 500ms intervals. This example is built with React and D3 v5, with the face centered and scaled based on the SVG’s dimensions.

Llukastieber
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn on a yellow circular head using SVG elements. The face’s eyebrows and mouth animate, moving up and down and scaling to create an expressive motion. The example uses d3.select to build the SVG structure and d3.arc to construct the mouth path. Eyebrow and mouth animations are driven by chained d3.transition calls with specified durations. The code uses a React setup and a bare HTML page, with all D3 functions applied directly to the SVG.

JJoachimSchaeffer
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with SVG shapes using D3.js v5, featuring animated eyebrows that move downward and back upward over two seconds. The face uses a yellow circle, black stroke, and an arc-generated mouth with `d3.arc`. Code imports `select` and `arc` from D3, applying chained `transition().duration()` calls to animate the eyebrow group’s transform. React is noted in metadata, though the example runs as a standalone HTML page with a static SVG canvas.

Iidwann-eng
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with D3.js as a yellow circle, complete with eyes, a mouth, and eyebrows that animate by moving up and down. The code uses D3's selection and DOM manipulation methods to build the SVG structure, while `transition().duration(1000)` creates the repeating eyebrow motion. The face is constructed using basic SVG shapes like `circle` for the head and eyes, a `path` for the mouth via D3's arc generator, and `line` elements for the eyebrows, all centered within an SVG canvas.

SShady Mohammed
95% match