Skip to main content
SimilarExport ZIP
100%

D3 test

✓ Published0🌍 Public
LLeyou Hong
Last edited Oct 20, 2020
Created on Oct 20, 2020
Forked from D3 test

This example shows a simple, animated face built with SVG shapes in React. The code uses D3 v5 selection methods to create a yellow circle for the head, two circles for eyes, and a path for a mouth generated with the `d3.arc` API. A rectangular eyebrow is animated using chained `transition().duration(2000)` calls, moving it vertically and back. Rendering is done entirely through SVG elements, with static positions defined in `index.js` and loaded via `bundle.js`.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 test

This example shows a simple, animated face built with SVG shapes in React. The code uses D3 v5 selection methods to create a yellow circle for the head, two circles for eyes, and a path for a mouth generated with the `d3.arc` API. A rectangular eyebrow is animated using chained `transition().duration(2000)` calls, moving it vertically and back. Rendering is done entirely through SVG elements, with static positions defined in `index.js` and loaded via `bundle.js`.

LLeyou Hong
100% 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
92% match
Loading thumbnail…

D3 test

This example shows a simple yellow face built from SVG shapes, with eyes that blink through a repeating eyebrow animation and a smiling arc-shaped mouth. The code uses D3 v6 selections to append circles, rectangles, and a path to an SVG canvas, while the mouth is drawn with the `d3.arc` helper. A two-stage `transition` chain animates the eyebrows downward and back, demonstrating chained timing. The face is centered using an SVG transform, and static styling comes from the included stylesheet.

Vvmoharir
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build an animated face from basic SVG shapes within a React framework. The code draws a yellow circle as the face, adds two eyes with matching eyebrows, and constructs a mouth using the D3 `arc` path generator with specific inner and outer radii. Eyebrows animate via chained `transition()` calls, moving upward and back down over a two-second duration. The SVG canvas is 960×500 pixels, with all elements positioned relative to a centered group using translation transforms.

Llujinxuan-fang
91% match
Loading thumbnail…

Let's Make a Face with D3,js!

This example uses D3.js version 5 to build an animated face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, and a custom arc path renders the mouth. The eyebrows, drawn as rectangles, perform a repeated vertical transition to simulate a winking or expressive motion. The code leverages D3’s `select`, `arc`, and chained `transition().duration()` methods, while React and a bundled `bundle.js` handle the application structure. All coordinates and sizes are derived from the SVG’s width and height attributes.

Sslipperyd
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, two eyes, and a mouth drawn with the `arc` function. Eyebrows are animated using chained `transition` calls, moving them down and back over two seconds each. The code arranges all parts within an SVG, using React for scaffolding and numeric attributes for positioning.

DDavid Trye
91% match
Loading thumbnail…

Face with D3.js

This example shows a simple, stylized face built from SVG shapes. A yellow circle forms the head, with red circles for eyes, black rectangles for eyebrows, and a black arc path for the mouth. The code uses the D3.js v5 `select` and `arc` APIs within a React framework, and animates the eyebrows using chained `transition()` calls with a two-second duration to shift them upward and then back down.

Ddivinebooger
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, centered within a 960x500 canvas. A yellow circle forms the head, with eyes, eyebrows, and a mouth built from circles, rectangles, and a path generated via `d3.arc`. The animation shows the eyebrows moving down and up using chained `transition` calls with a 600ms duration, creating a subtle expressive blink. The code leverages `d3.select`, `append`, and attribute methods to assemble the scene, targeting React as the framework while rendering directly to SVG.

BBat-Erdene
91% match