Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
EEeshwarReddy
Last edited Feb 25, 2023
Created on Feb 25, 2023

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.

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

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

A smiling face is drawn with D3.js v5, featuring a yellow circle, two eyes, animated eyebrows that repeatedly move up and down, and a mouth shaped using an arc path. The SVG is centered using a translation, and the eyebrows animate via chained `transition().duration` calls that toggle their vertical offset. The code imports `select` and `arc` from D3, reads the SVG dimensions from attributes, and builds the face from primitive shapes. The example is rendered as a static SVG with animation triggered on load, using a React-friendly structure.

SSatyaVineeth
95% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
95% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
95% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
95% match