Skip to main content
SimilarExport ZIP
100%

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

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

A cartoon face rendered with D3.js v5 draws a yellow circle head with black-outlined eyes, a nose, eyebrows, and an arc-based mouth. The eyes and eyebrows are grouped and animated using chained `transition().duration()` calls, moving the brows up and down over two seconds. The code imports `select` and `arc` from D3, builds the SVG in a React-free HTML page, and centers the face via a translated `<g>` element. The mouth path uses `d3.arc` with inner and outer radii and angle ranges.

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

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
90% 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
89% match
Loading thumbnail…

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

KK V VINITHA
89% match
Loading thumbnail…

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

This example builds a smiling face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates fundamental DOM manipulation through selections and chained `transition` calls that animate the eyebrows upward and back down over two two-second intervals. Rendering is done entirely with SVG elements appended to a 960×500 canvas, using D3’s `select`, `append`, attribute setters, and the `arc` generator for the mouth path.

AAvi171725888
88% 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
88% 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
88% 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
88% 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
88% match