D3.js Intro

100%

✓ Published1🌍 Public

Last edited Apr 19, 2022

Created on Mar 21, 2022

This example displays a simple yellow smiley face rendered in SVG, with animated eyebrows that move up and down over time. The face is constructed using D3.js v5 selection methods to append circles, rectangles, and an arc-generated mouth path. The code uses the `arc` API from D3 to define the mouth shape, while `transition` and `duration` create the eyebrow animation. The static SVG container is sized at 960 by 500 units, and the face is centered using a translated group element.

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 yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

VVito

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila

93% match

Loading thumbnail…

Let's make a face with D3.js

This example shows a yellow smiley face drawn with SVG shapes, where the eyebrows repeatedly rise and lower in a looping two-second animation. The face is constructed using D3 selections to append a circle, two eye circles, two rectangular eyebrows, and a mouth path generated with the `arc` helper. The animation is implemented by chaining `transition().duration(2000)` calls on the eyebrows group, toggling its vertical transform. All geometry is positioned relative to the center of the SVG using a translated group.

JJaKokosz

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows and eyes. The face is composed of SVG circles, rectangles, and an arc-generated mouth, all positioned using SVG attributes. D3 transitions sequentially enlarge and contract the eyes while translating the eyebrow group up and down, creating a winking expression. The code uses D3 v5 APIs including `select`, `arc`, and chained `transition` calls to animate the elements on an SVG canvas.

VVerdidk

93% match