Skip to main content
SimilarExport ZIP
100%

First D3 demo

✓ Published1🌍 Public
Bbalaszol
Last edited Sep 17, 2020
Created on Sep 16, 2020
Forked from HTML Starter

A yellow smiley face rendered as SVG circles, a red nose, and a mouth drawn with the `d3.arc` path generator. D3 selections append shapes to a centered group, with the right eyebrow animating upward and downward via two sequential `transition.attr` calls on a rectangle. The code imports `create`, `select`, and `arc` from D3 v6 and uses static dimensions without external data.

AI-generated description

This page is intended as a demo to try the power of D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js code example builds a yellow smiley face from SVG primitives, including a circular head, eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The face is centered via a translated group, and the eyebrows are rectangles that move up and down using chained `transition()` calls with a two-second duration each. The demo relies on D3 v5's selection methods (`select`, `append`, `attr`) to construct the shape and animate its parts directly in the browser.

Vvaynexie
88% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 selections to append a yellow circle, eyes, and a mouth via the `arc()` shape generator. With `transition().duration()`, the eyebrows animate upward and back, moving a group containing two rectangles. The code imports `select` and `arc` from the d3 module, targeting an SVG element sized through its attributes. Data is hardcoded as numeric constants for geometry, with no external dataset.

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

Let's make a face with D3.js!

A yellow smiley face is drawn onto an SVG canvas using D3 selections, with circles for the eyes, rectangles for the eyebrows, and a D3 arc generator for the mouth. The eyebrows rise and lower via chained `transition` calls that animate the `transform` attribute over two seconds each. The example demonstrates fundamental DOM manipulation with `d3.select` and `append`, plus D3 v5’s modular imports for `select` and `arc`.

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

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG face is built using D3 selections to append a circle for the head, circles for the eyes, and an arc-generated path for the mouth. Two rectangles form the eyebrows, with the right eyebrow moving upward via a `transition` over two seconds. The code imports `select` and `arc` from the D3 v5 library and reads dimensions from the SVG attributes.

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

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate up and down in a looping motion. It demonstrates fundamental DOM manipulation using D3.js selections, appending a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. The animation runs via chained `transition()` calls with `.duration(2000)` on the eyebrow group. The code imports `select` and `arc` from the `d3` module and uses `attr()` to set positions and styles.

Aalbanodossantos
87% match