Skip to main content
SimilarExport ZIP
100%

Lets make a face with D3.js

✓ Published0🌍 Public
Ppo-drik
Last edited Aug 14, 2019
Created on Aug 14, 2019
Forked from SVG and CSS Shapes

A yellow circular face with two eyes and a mouth is drawn using D3.js v5, with eyebrows that animate upward and back down over several seconds. The example uses `d3.select` and `d3.arc` to render SVG shapes including circles, rectangles, and a path for the smile. Transitions with specified durations (`transition().duration()`) drive the eyebrow movement. Data is not loaded; instead, hard-coded attributes control spacing and dimensions.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a smiling face, featuring two black eyes and rectangular eyebrows that animate upward and then return to their original position. The face is constructed with D3.js v5 using SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the d3.arc() API for the mouth. The eyebrows transition via chained transition().duration() calls on a group element, which shifts their vertical offset by 50 pixels over two seconds before resetting.

CClara Hu
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black-outlined eyes and animated eyebrows is rendered in SVG using D3.js. The face is built from D3 selections and shape generators, including `d3.arc` for the mouth path. Eyebrows transition vertically using `transition.attr` with a 2000-millisecond duration, creating a repeated raising motion. The example demonstrates basic D3 data binding, SVG shape construction, and animation chaining on a static, hardcoded dataset.

Sssdark
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 D3.js face with a black stroke, eyes, and a mouth is drawn in SVG and animates its rectangular eyebrows up and down over two-second transitions. The code uses `select` and `arc` from D3 v5, setting circle radii and positions, and applies chained `transition().duration()` calls to move the eyebrow group. The face is centered in a 960×500 SVG, with the mouth rendered as a donut-like arc path.

Ooptimizeresume
95% match
Loading thumbnail…

let's make a face with d3.js

A yellow circle face with black eyes, animated eyebrows, and a curved smile is drawn using D3.js v5. The example builds the face with SVG shapes, including `circle` and `rect` elements, and an `arc` path for the mouth. Eyebrows transition vertically up and down over two seconds using `transition.attr`. The code imports `select` and `arc` from d3, sets an initial SVG size, and groups elements around a centered translation.

BBun
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, rectangles, and an arc path animates its eyebrows in a looping transition. D3.js v5 selections append and style the facial elements, while `transition.attr` shifts the right eyebrow’s vertical position over 2-second intervals. The mouth uses the `d3.arc()` generator to create a curved path. Static attributes set the face radius, eye spacing, and eyebrow dimensions.

TTrey Billing
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn and animated using D3.js v5. The code builds the face with SVG shapes, positioning elements relative to the center of a 960×500 canvas. Eyebrows rise and fall repeatedly via chained `transition().duration(2000)` calls on the parent group. The mouth is generated using the `d3.arc()` helper with specified inner/outer radii and angular span, while the `select` API attaches elements to the SVG root.

PpilafGB62
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a face with two eyes, animated eyebrows, and a smile, all built using D3.js v5 with SVG rendering. The code uses `d3.select`, `d3.arc`, and `selection.transition` to draw the head, eyes, mouth, and to animate the eyebrows up and down over two seconds. The face is centered on a 960×500 SVG canvas, with all shapes positioned via translations and hardcoded numeric offsets for features like eye spacing and eyebrow dimensions.

CCristian Pintor
94% match