Skip to main content
SimilarExport ZIP
100%

D3 Tutorial

✓ Published3🌍 Public
SShivansh Mathur
Last edited Mar 10, 2020
Created on Feb 20, 2020
Forked from HTML Starter

This example is a D3 Tutorial showing a smiling face built from basic SVG shapes, with animated eyebrows that move up and down. It uses D3 v5 selection methods like `append`, `attr`, and `transition` and `duration` for the eyebrow animation, while drawing a mouth with `d3.arc`. Data from `data.csv` is not displayed; instead, the visualization relies on hardcoded coordinates within a React framework, rendering through an SVG container.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Tutorial

A D3 tutorial demonstrates building a smiling face from SVG shapes, featuring animated eyebrows that raise and lower over four seconds. The code uses d3.arc to create the mouth path, while circles and rectangles form the eyes and eyebrows within a yellow circle. The eyebrows animate through chained transition.duration calls, moving their group’s transform attribute. Rendering occurs in an SVG canvas using d3.select and d3.append, with the final result displayed in a 960x500 viewport.

SSageSwabe
89% match
Loading thumbnail…

D3 intro

This example renders a smiling face using D3 v5 and React, with SVG elements including circles, rectangles, and paths. The face is centered on the screen, and the eyebrows animate upward and downward using chained `transition()` calls with a two-second duration each. The code leverages D3’s `select`, `arc`, and `line` APIs to construct the mouth and nose shapes, while static SVG attributes define the eyes and overall composition. The visualization demonstrates basic SVG drawing and animation within a React framework.

CChris Mora
88% match
Loading thumbnail…

D3.js Intro

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.

Zzjutkarma
88% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example uses D3.js v6 to construct the face from circles, rectangles, and an arc-generated mouth, centered within an SVG canvas. D3 transitions drive the eyebrow animation by repeatedly updating the transform attribute of the eyebrow group. The code imports `select` and `arc` from D3, with hardcoded dimensions for the facial features.

VVinceVerspeek
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a simple cartoon face built with D3.js v5 and React, rendered as SVG with animated eyebrows. It uses `d3.select` and `d3.arc` to create the face shape, eyes, and mouth, while `transition().duration()` animates the eyebrows up and down repeatedly. The face is centered using SVG group transforms, with fixed pixel offsets for eye spacing and brow placement. No external data is used; all geometry is defined directly in code.

Iidwann-eng
88% match
Loading thumbnail…

D3 tutorial

A minimal D3 tutorial example renders a cartoon face in SVG, with a yellow circle head, eyes, and a smile drawn via the `d3.arc` path generator. The code uses D3 v6 selections to append elements, and demonstrates `transition` with chained `.duration()` calls to animate the eyebrows up and down repeatedly. The React-free setup loads D3 from a CDN in an HTML page, with the styling applied through external CSS that hides page margins and overflow.

SSergio Eijben
88% match
Loading thumbnail…

Let's Make a Face with D3.js!

A smiling face built from basic SVG shapes animates its eyebrows up and down over four seconds. The example uses D3.js v5 with the `select` and `arc` APIs to construct circles for eyes, rectangles for brows, and an arc-shaped mouth on a yellow head. React does not appear in the code; the visualization relies on D3 transitions to repeat the eyebrow motion, rendering entirely in SVG.

Ggilbster
87% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows. The example shows an SVG face whose eyebrows move dynamically, illustrating how D3 selects and modifies elements. The code uses `d3.select`, `append`, and `attr` to construct the face from SVG circles and paths, then applies transitions to adjust eyebrow positions. It relies on D3 v5, rendering everything as SVG within a 960x500 viewport, with accompanying CSS for styling and layout. The dataset is implicit—the face geometry is hardcoded rather than loaded from external data.

Wwen787
87% match