Test

100%

✓ Published1🌍 Public

Last edited Feb 6, 2021

Created on Feb 4, 2021

This example shows a simple animated face built entirely with D3 version 6. A blue circle serves as the head, with two white eyes that blink by moving up and down via chained transition calls, each lasting 300 milliseconds. A mouth is drawn using the d3.arc function with configured inner and outer radii and specified start and end angles. All shapes are rendered as SVG elements within a 400x400 canvas, centered using a group transform.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Hello D3 Version 6

This example shows a simple animated smiley face drawn in an SVG canvas using D3 version 6. It demonstrates basic shape creation and chained transitions: the left eye blinks by shrinking and growing its radius, while the right eye performs a similar pulse with different timing. The face uses yellow and black circles for the eyes and a path generated with `d3.arc` for the mouth. The code selects the SVG with `d3.select`, appends elements, and applies transitions via `transition().duration()`. A separate `index.js` file uses `select` from the D3 module to display a text message.

Mmgl12432

86% match

Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha

86% match

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree

86% match

Loading thumbnail…

Let's make a face with D3.js!

A simple, animated face built with D3.js v5 appears on a blank SVG canvas. The code draws a large yellow circle for the head, adds two eyes and rectangular eyebrows, and constructs a mouth using the `d3.arc()` generator. The eyebrows animate through a two-stage `transition().duration(2000)` sequence, moving down and back up. The example demonstrates basic SVG shape creation, attribute manipulation, and chained transitions, with dimensions calculated from the container's width and height.

Mmalmeister

86% match

Loading thumbnail…

Let's make a face with D3.js!

A face built from SVG primitives is drawn on a 960 by 500 canvas, with yellow circle head, black-outlined eyes, eyebrows, and a smile-shaped arc. The animation sequentially shifts the entire eyebrow group downward and then back upward over two seconds each using chained D3 transitions. The example demonstrates basic DOM manipulation via `d3.select` and `append`, constructing shapes with attributes, and moving elements with `transition().duration().attr()`, where the mouth is generated with the `d3.arc` generator.

Nnoelmiranda

86% match

Loading thumbnail…

TEST2 Let's make a face with D3.js!

A smiling face drawn with SVG circles and an arc path animates its rectangular eyebrows upward and downward in a looping two-second transition. Using D3.js v5, the example demonstrates fundamental DOM selection and manipulation with `select`, `append`, and `attr`, while the mouth is generated via the `arc` generator. The code builds the face from absolute coordinates and applies a chained `transition` to the eyebrow group, showcasing data-free, direct SVG updates and timed animation without scales or data binding.

Xxhoumba

86% match

Loading thumbnail…

Test Let's make a face with D3.js!

A smiling face rendered as yellow SVG circles, rects, and an arc path demonstrates fundamental D3.js DOM manipulation. Eyebrows animate upward and back down through chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the mouth uses `d3.arc`. The code builds the figure by selecting the SVG, appending groups, and setting shape attributes for eyes, eyebrows, and face from fixed numeric constants, with no external data source.

Bbakstorage00001

86% match