Play around with d3.js

100%

Play around with d3.js

✓ Published0🌍 Public

Last edited Mar 8, 2023

Created on Mar 8, 2023

This example uses D3 v5 and React to build an animated, SVG-based face with eyes that shift horizontally in a looping transition. The code leverages D3 selections, SVG attribute binding via `attr`, and chained `transition().duration()` calls to alternate the eye group’s transform between two positions. The face is centered using a translated `<g>` element, with fixed constants for eye spacing, radius, and brow dimensions. Rendering relies purely on SVG shapes—circles and rectangles—without external data, focusing on animation timing and nested group transformations.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a stylized cartoon face drawn with D3.js, where the eyes animate horizontally in a playful loop. The face is constructed using SVG circles for the head and eyes, with a centered group transform positioning the features. The code uses D3 v5 selections and transitions, specifically `transition().duration()` to shift the eye group’s `transform` attribute over two seconds. Rendering is done via SVG in a React framework, with hardcoded dimensions and offsets defining the face’s geometry, and no external data source.

IIan

90% match

Loading thumbnail…

Let's make a face with d3.js!

A simple animated face is drawn with SVG inside a React component. D3 v5 selections create a yellow circle for the head, black circles for eyes and eyebrows, and an arc path for the smile. Transitions animate the eyebrows upward and the smile downward over two seconds each, then return them to their original positions. The example demonstrates layering groups with `svg.append('g')`, applying translation transforms, and using `transition().duration()` for sequential movement.

BBhavyatulasi

88% match

Loading thumbnail…

D3 intro

This example renders a smiling face using D3 v5 and React, with SVG elements including circles, rectangles, and paths. The face is centered on the screen, and the eyebrows animate upward and downward using chained `transition()` calls with a two-second duration each. The code leverages D3’s `select`, `arc`, and `line` APIs to construct the mouth and nose shapes, while static SVG attributes define the eyes and overall composition. The visualization demonstrates basic SVG drawing and animation within a React framework.

CChris Mora

88% match

Loading thumbnail…

Lets make a face with D3.js!

This example presents a simple, animated face built entirely with D3.js v5 in a React framework. It shows how to construct facial features—eyes, eyebrows, and a mouth—from basic SVG shapes like circles, rectangles, and an arc path, all positioned within an SVG canvas. The code uses D3’s `select`, `arc`, and `transition` APIs to draw the elements and animate the eyebrows repeatedly up and down. The face is centered via a group translation, with eye spacing and brow offsets controlled by constants.

Ddanhuijia

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

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a simple cartoon face built with D3.js v5 and React, rendered as SVG with animated eyebrows. It uses `d3.select` and `d3.arc` to create the face shape, eyes, and mouth, while `transition().duration()` animates the eyebrows up and down repeatedly. The face is centered using SVG group transforms, with fixed pixel offsets for eye spacing and brow placement. No external data is used; all geometry is defined directly in code.

Iidwann-eng

87% match

Loading thumbnail…

D3 Lets make a face

A cheerful cartoon face drawn with SVG animates its features using D3 transitions. The code selects an SVG element and uses D3’s `arc` generator to morph a mouth from an open grin to a filled shape over three seconds. Eyes blink by scaling their radius, while rectangular eyebrows shift vertically in sync. Built with React and D3 v5, the example leverages chained `transition().duration()` calls to create simple, looping motion between states.

11995ana

86% 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

86% match