D3 Trial

100%

✓ Published0🌍 Public

Last edited Jan 2, 2021

Created on Jan 1, 2021

A cartoon face is drawn using D3.js v6 within an SVG, centered in a 960 by 500 viewport. The face features yellow circular head, black eyes, and a mouth shaped as an arc path. The left eyebrow animates upward with a sequence of two `transition().duration(2000)` calls, while the right eyebrow remains static. The code uses D3’s `select`, `arc`, and attribute setters, and it runs in a React framework context. All shapes are appended to a translated group element.

AI-generated description

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

Similar vizzes

Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman

88% match

Loading thumbnail…

Let's make a face with D3.js!

A simple cartoon face built from SVG primitives appears on a yellow circular head with black outlines, featuring two eyes, movable eyebrows, and a mouth drawn as an arc path. D3 selections and transitions animate the eyebrow group’s vertical position over two seconds, first lowering and then raising it. The code imports `select` and `arc` from D3 v5, uses SVG circles, rectangles, and paths, and runs within a React-created bundle on a bare HTML page.

Iidwann-eng

88% match

Loading thumbnail…

Face D3

A yellow face drawn with D3.js SVG primitives animates its eyebrows in a looping motion. The face, constructed from circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth, is centered in an SVG canvas. The animation uses D3's transition system to move the eyebrow group up and down over two seconds each way. The code imports `select` and `arc` from D3 v5 and runs within a React framework.

Ssayleenaik

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry

87% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong

87% match

Loading thumbnail…

Let' make a face with D3.js

A cheerful cartoon face, centered on a yellow SVG circle, is assembled from simple geometric shapes and set in motion. The left and right eyes and rectangular eyebrows are positioned relative to the face’s center, and the entire eyebrow group animates upward and then back down over four seconds using chained `transition` calls on the D3 selection. A mouth is drawn as a semi-circular arc using the `arc` generator from D3’s shape utilities. The example uses D3 v5 with the React starter template, operating on SVG elements within a 960×500 viewport.

Eelenap-sportsbet

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

87% match

Loading thumbnail…

Make a face with D3.js!

This example demonstrates how to draw a cartoon face using D3.js with SVG shapes and animation. The face consists of a yellow circle, two black eyes, rotated rectangular eyebrows, and a curved smile path. The code uses D3’s `select`, `arc`, and `transition` APIs to position and animate the eyebrows over time. All shapes are rendered in SVG, and the face is centered using a translation transform.

Dduckmammal

87% match