Skip to main content
SimilarExport ZIP
100%

Fork of Intro D3

✓ Published0🌍 Public
MMar-99
Last edited Feb 20, 2022
Created on Feb 20, 2022
Forked from Intro D3

This example shows a cartoon face built from SVG shapes—a yellow circle head, eyes, eyebrows, and an arc-based mouth—centered and animated with D3 transitions. The code uses d3.arc to generate the mouth path, while d3.select and d3.transition animate the eyebrow group’s vertical offset over two alternating two-second phases, creating a blinking or winking effect. Rendered via d3.v6 in a React-free HTML page, it demonstrates basic shape composition and chained transition.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 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
92% match
Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with blue eyes, animated eyebrows, and a curved mouth forms a stylized face rendered in SVG. The code uses D3 v7 selections to append SVG primitives, and a D3 arc path generator to create the mouth based on specified inner and outer radii and angles. Two rectangles represent eyebrows and use chained `transition().duration()` calls to move them vertically over two seconds before returning. The example demonstrates basic D3 shape generation, SVG group elements for shared eye styling, and timed attribute transitions.

AAsmitha-Sa
91% 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
91% match
Loading thumbnail…

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

This example animates a cartoon face built from basic SVG shapes, with eyebrows that move up and down over time to create a playful expression. The face consists of a yellow circle for the head, two black-outlined eyes, and a mouth drawn as a curved arc. The code uses D3.js v5 to construct and manipulate the SVG elements, and leverages D3's `transition()` method to animate the vertical position of the eyebrows. The static parts of the face (head, eyes, mouth) are defined with D3's `select` and `append` APIs, while the mouth is generated with `d3.arc`. The animation runs in a continuous loop, making the face appear to raise and lower its brows indefinitely.

DDINESH SAI BOPPANA
90% match
Loading thumbnail…

Intro D3

This example shows a simple, animated face constructed from basic SVG shapes. A yellow circle with a black outline forms the head, with two smaller circles serving as eyes. A paper-bag-shaped mouth is drawn using a path with the D3 `arc` generator. The code uses D3 v6 selection and appending methods to build the SVG structure, and a chained `transition().duration()` call to animate the eyebrows upward and back down. The animation runs once on page load, demonstrating the basic use of D3 for creating and manipulating vector graphics within a React-free, vanilla JavaScript environment.

TTimvanAlphen
90% match
Loading thumbnail…

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

This example builds a cartoon face with D3.js v5, rendering a large orange circle as the head with two eyes, eyebrows, and a mouth drawn using SVG shapes. The code uses `d3.select` and `d3.arc` to construct the mouth, while `transition.attrTween`-like chained `transition` calls animate the eyebrows upward and back down over two seconds each. Positioned via SVG transforms in a centered group, the face demonstrates static shape composition paired with simple timed motion, all within a React framework setup.

RRevanthGrreddy
90% match
Loading thumbnail…

D3 Intro

This example renders an animated SVG face using D3.js version 7.8.2 within a React framework. The code draws a yellow circle with eyes, eyebrows, and a mouth, then uses D3’s `transition` API to animate the eyebrows downward and back over two 2-second intervals. The visualization demonstrates basic SVG shape construction (circle, rect, path) and JSON-driven animation, with the mouth generated via D3’s `arc()` generator for a semi-circular smile. The rendering relies on D3’s selection and attribute manipulation methods.

Aadbirch
90% 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
90% match