Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Dec 4, 2020

Created on Dec 1, 2020

This example draws a bright yellow cartoon face using SVG shapes, with two eyes, a mouth, and animated eyebrows. The face is centered within an SVG canvas using D3 selections and transformation attributes. Eyebrows animate up and down using chained `transition().duration()` calls. The code utilizes `d3.select`, `d3.arc` for the mouth path, and D3’s transition system to create the motion. The rendering approach is purely declarative SVG construction in a React-free environment, with styles defined in a separate CSS file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example displays a simple yellow face composed of SVG shapes, including eyes, eyebrows, and a mouth, all built programmatically with D3.js. The face is centered within a fixed viewport using a group transformation. The code uses D3’s `select` to target the SVG element and `append` to construct each shape, while the `arc` function generates the mouth’s path. An animated eyebrow movement is achieved by chaining multiple `transition().duration()` calls, which sequentially shift the eyebrow group’s vertical position.

Ccledevoute

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle becomes a cartoon face as D3.js draws two eyes, animated eyebrows, and an arc-based mouth inside an SVG. The code uses D3 v6 selections and transitions, with `transition.attr` to move the eyebrows up and down over two seconds. Eye positions and sizes come from hardcoded variables, while the mouth uses `d3.arc` with inner and outer radii. The face is centered via a group transform, and the eyebrows are rectangles that animate vertically, demonstrating simple SVG animation with D3’s transition API.

PPiotr Paszek

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-style face built with SVG shapes, including two eyes, rectangular eyebrows, and a smiling mouth. The eyebrows continuously move upward and downward through a two-stage chained animation cycle. The face is constructed in D3 v5 using `d3.select` and `d3.arc`, with shape attributes set directly. A React starter is available, but the primary implementation uses plain D3 with SVG transitions to animate the eyebrow group’s translate transform.

CCyc-Evelyn

95% match

Loading thumbnail…

let's make a face with D3.js

This example renders a cartoon face in SVG using D3.js, with a yellow circular head, two eyes, and eyebrows that animate upward and back down. The code constructs the face by appending circles and rectangles to a group centered on the canvas, then uses `transition().duration()` to create a brief eyebrow-raising motion. A mouth is drawn with D3’s `arc()` generator, specifying inner and outer radii and angular range. The scene is static except for the eyebrow animation, demonstrating basic SVG shape construction and tweened transitions within a React framework.

RRemy-dev

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face is drawn with D3.js, featuring two eyes, animated eyebrows, and a smile-shaped mouth rendered as an arc. The SVG is centered and built using D3 selections, with the mouth created via the `arc` generator. Eyebrows transition vertically using `transition().duration(2000)`, shifting their position over two seconds before settling. The example uses D3 v5 within a React framework, rendering all elements as SVG with animation.

SSunil Skanda

94% match

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

94% match

Loading thumbnail…

let's make a face with d3.js

A yellow face with two eyes, animated eyebrows, and a mouth is drawn in SVG using D3 v5. The face is centered within a fixed 960x500 canvas, with circles for the head and eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrows animate vertically via chained `transition` calls over 2000ms each, using `attr` to update the transform. The code imports `select` and `arc` from D3 and builds the visual entirely with SVG elements.

Ppengpenghub

94% match