Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
Sssdark
Last edited Nov 7, 2019
Created on Nov 6, 2019

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.

AI-generated description

import { select } from 'd3';

const svg = select('svg');

const circle = +svg.append('circle');

const width = +svg.attr('width');

const height = +svg.attr('height');

console.log(width);

circle.attr('r', height / 2);

circle.attr('cx', width / 2);

circle.attr('cy', height / 2);

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

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

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow SVG face with black-outlined features animates its eyes and eyebrows in a looping sequence. The face is built using D3.js v5, with circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. Transitions scale both eyes and shift the eyebrows vertically over two-second intervals, creating a playful blinking and raising motion. The SVG is centered within a 960×500 viewport, rendered entirely with D3 selection and transition methods.

HHasideluxe
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

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

Let's make face with D3.js!

A yellow circular face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in SVG using D3.js v5. The example demonstrates how to build a static facial structure with `select`, `append`, and `arc` for the mouth, then animate the rectangular eyebrows via chained `transition().duration()` calls that move them up and down. All shapes are positioned and scaled relative to the SVG’s width and height, with the face group translated to the center. The code uses D3’s selection and arc generators, with transitions running for two seconds per movement phase.

Bbhayyasaheb
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with two eyes and animated eyebrows is rendered in SVG using D3.js. The face is drawn with simple shapes including circles for the eyes and a path for the mouth, created using `d3.arc` with specified inner and outer radii. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, demonstrating D3's animation capabilities. The SVG canvas is 960 by 500 pixels, with all elements centered through a `g` transform.

IIyke2909
96% match