D3.js Demo

100%

✓ Published1🌍 Public

Last edited Aug 20, 2019

Created on Aug 19, 2019

This example draws a simple animated face using D3.js v5, rendering shapes in SVG. It uses `d3.select` to build a green circle for the face, two eyes, a mouth created with `d3.arc`, and rectangular eyebrows. A `transition().duration()` animation moves the eyebrows up and down. The code also imports `select` and `arc` as ES6 modules from the D3 library.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Demo

SSpinningK

100% match

Loading thumbnail…

D3.js introduce

This example builds a playful face from basic SVG shapes using D3.js v5. A yellow circle forms the head, with two white ellipses as the background for the eyes, while two dark circles animate upward and change to white over two seconds via `transition().duration()`. A brown arc, created with the `d3.arc()` generator, renders a smiling mouth. The code uses D3 selections to append and style each element, and relies on the `select`, `arc`, and attribute chaining methods to construct the static composition and the animated eye movement.

Wwyh1029

90% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows up and down in a loop. The demo shows how D3.js v5 selects and appends DOM elements, using `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the eyebrow group. A static yellow circle with black stroke forms the head, while black circles and rectangles compose the eyes and brows. The code relies on data-free hardcoded coordinates rather than a dataset.

Ccharliemok

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple animated face. The SVG rendering starts with a yellow circular face, then adds eyes, eyebrows, and a mouth using an arc path. The eyebrows move up and down through chained transitions, creating a subtle animated expression. The code demonstrates the use of `select`, `append`, `attr`, and `arc` APIs within an SVG container, showing how basic geometric shapes can be assembled into a recognizable character.

Xxfqx92

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v6 to draw a cartoon face with black circular head, red eyes, eyebrows, and mouth. Built with SVG elements, the face includes animated eyebrows that shift upward and back using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, using the `arc()` generator to create the brow and mouth shapes with specified inner/outer radii and angles. Static circle elements form the eyes, while grouped paths handle the animated facial features.

MMustafa Shaheer Hamid

89% match

Loading thumbnail…

D3-Face

This example creates a simple, animated face using the D3.js library (version 7) with SVG rendering. It draws a yellow circular head, two red eyes, and a mouth using an arc shape, all positioned with transform translations. The code uses D3's `select`, `append`, and `attr` to build the SVG elements, and a chained `transition().duration(2000)` to animate the eyebrows moving up and down. The visual is generated entirely from geometric primitives, with no external data source, and runs in a loop based on the declared transitions.

MMahaveer Jain

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can construct a simple animated face using fundamental SVG elements. A yellow circle forms the head, with two circles for eyes and a path drawn using the `arc` generator for the mouth. The code uses `d3.select` and `d3.append` for DOM manipulation, while the `transition` method animates the eyebrows upward and back over two seconds each way. The face is centered via a group transform, and all shapes are rendered as SVG with hardcoded attributes.

MMargarita Chernetski

89% match