Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js

✓ Published0🌍 Public
DDeegutla123
Last edited Jun 18, 2022
Created on Jun 18, 2022

This example uses D3.js v5 with SVG rendering to construct a stylized face composed of geometric shapes. It draws a yellow circle as the head, then adds eyes, eyebrows, a nose using the `arc()` API, a mouth formed from an arc path, and rectangular teeth. Additional circles serve as ears positioned outside the main face element, all within a fixed 960×500 SVG canvas. The visualization demonstrates declarative shape composition and coordinate transformations via `select()`, `append()`, and `attr()` methods.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of let's make a face with D3.js

A stylized face is constructed from basic SVG shapes, including a yellow circle for the head, two white ellipses for the eyes, black circles for pupils, and a gray arc for the mouth. The drawing is rendered on a 1000×500 SVG canvas using D3 v5 selection and attribute methods. Coordinates are computed dynamically from the canvas width and height, while the mouth is generated using the D3 arc generator with explicit inner and outer radii and angle values. The code is written in React and imports the `select` function from D3.

KK V VINITHA
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example shows a yellow face built with D3.js v5, rendered as animated SVG elements. A circle forms the head, two circles create the eyes, and an arc generates the mouth. The eyebrows, drawn as rectangles, animate upward and then back down using chained `transition` calls with a two-second duration. All shapes are positioned within a centered group using SVG transformations. The code imports `select` and `arc` from D3, and reads the SVG dimensions from the DOM attributes to set the layout dynamically.

EEeshwarReddy
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example renders a simple, stylized face using D3.js v5 within a React framework. It constructs a yellow circle for the head, two eyes with eyebrows, and a mouth path. The eyebrows animate by moving down and up over two seconds using D3 transitions. The code leverages `d3.select`, `d3.arc` for the mouth shape, and SVG attributes for positioning, with the entire scene drawn inside an SVG element.

Fflufficornn
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example builds a stylized yellow face from primitive SVG shapes—circles, rectangles, and an arc—using D3.js methods like `select`, `append`, and `attr`. The face is centered via a D3 selection transform, and its eyebrows animate vertically through chained transitions, first lowering and then returning to their original position. The arc for the mouth is generated with the D3 `arc` helper, while all shapes are drawn in an SVG container. Data is minimal, with hardcoded dimensions controlling eye spacing, radius, and eyebrow offsets.

IIc1200010
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle with black outlines forms a cartoon face, using SVG elements for the head, eyes, eyebrows, and a mouth created with d3.arc’s path. The eyebrows animate vertically via chained d3 transitions, moving up and down repeatedly. D3 v5 selections and attribute methods position the face components relative to the SVG's center, while inline JavaScript and CSS handle rendering and page layout.

SSampras Dsouza
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

HHarishma Nallala
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example shows a stylized yellow face built from SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a half-annulus arc for the mouth. The eyebrows animate up and down in a repeating two-second transition using D3’s `transition().duration()`. The code uses `d3.select` with `d3.arc` to generate the mouth path, and positions elements via SVG attribute methods and template literals. Rendered in a React-free HTML page with D3 v5, the face scales relative to the SVG’s 960×500 dimensions.

Aavinashchinta99
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7
93% match