Skip to main content
SimilarExport ZIP
100%

demo of D3

✓ Published1🌍 Public
Lliu981101
Last edited Dec 24, 2022
Created on Dec 24, 2022
Forked from D3 Starter

This example shows a simple yellow face with two eyes and an open mouth, rendered as SVG shapes and animated with D3 transitions. The code uses D3 v7's `select` and `arc` functions to build the shape, with a circle for the head, two circles for eyes, and an arc path for the mouth. One eye animates vertically up and down using chained `transition()` calls with `attr` updates over 1000ms durations, while the other eye and mouth remain static. The SVG canvas is 800 by 400 pixels, and the drawing is centered via a `g` element 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…

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
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…

D3.js Demo

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.

SSpinningK
88% match
Loading thumbnail…

D3.js Demo

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.

SSpinningK
88% 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
88% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a smiling arc mouth is drawn in SVG using D3 v5. The example demonstrates basic shapes and transitions, with the eyebrows moving up and down in a looping animation via chained `transition` calls. Code imports `select` and `arc` from D3, uses SVG attributes like `cx`, `r`, and `path` with an `arc` generator, and positions elements relative to the SVG center. Static eye circles and a mouth path complete the composition.

GGulrez
88% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple animated face built entirely with D3.js primitives. It shows a yellow circle head with two eyes, eyebrows, and an arc-shaped mouth, all composed of SVG shapes including circles, rectangles, and a path. A continuous two-second transition repeatedly moves the eyebrows up and down, creating a subtle animation. The code uses D3's `select` to target the SVG root, `append` to build the geometric elements, and the `arc()` generator to construct the mouth’s path, with all rendering in SVG.

Ppoyomon
88% match