Skip to main content
SimilarExport ZIP
100%

Learning D3.js

✓ Published1🌍 Public
CChristian Magelssen
Last edited May 23, 2020
Created on May 23, 2020
Forked from HTML Starter

This example demonstrates a simple animated figure built from ellipses representing a body, limbs, and a head. It uses D3.js v5 selections to append SVG shapes and apply manual `transform` attributes, while `transition()` methods animate properties like position and style. The figure is constructed entirely in code, with no external data source, and renders in a 960×500 viewport using static SVG elements.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

D3 test

This example shows a simple, animated face built with SVG shapes in React. The code uses D3 v5 selection methods to create a yellow circle for the head, two circles for eyes, and a path for a mouth generated with the `d3.arc` API. A rectangular eyebrow is animated using chained `transition().duration(2000)` calls, moving it vertically and back. Rendering is done entirely through SVG elements, with static positions defined in `index.js` and loaded via `bundle.js`.

LLeyou Hong
82% match
Loading thumbnail…

D3 test

This example shows a simple, animated face built with SVG shapes in React. The code uses D3 v5 selection methods to create a yellow circle for the head, two circles for eyes, and a path for a mouth generated with the `d3.arc` API. A rectangular eyebrow is animated using chained `transition().duration(2000)` calls, moving it vertically and back. Rendering is done entirely through SVG elements, with static positions defined in `index.js` and loaded via `bundle.js`.

LLeyou Hong
82% match
Loading thumbnail…

Play around with d3.js

This example uses D3 v5 and React to build an animated, SVG-based face with eyes that shift horizontally in a looping transition. The code leverages D3 selections, SVG attribute binding via `attr`, and chained `transition().duration()` calls to alternate the eye group’s transform between two positions. The face is centered using a translated `<g>` element, with fixed constants for eye spacing, radius, and brow dimensions. Rendering relies purely on SVG shapes—circles and rectangles—without external data, focusing on animation timing and nested group transformations.

IIan
82% 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
82% 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
81% 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
81% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a stylized cartoon face drawn with D3.js, where the eyes animate horizontally in a playful loop. The face is constructed using SVG circles for the head and eyes, with a centered group transform positioning the features. The code uses D3 v5 selections and transitions, specifically `transition().duration()` to shift the eye group’s `transform` attribute over two seconds. Rendering is done via SVG in a React framework, with hardcoded dimensions and offsets defining the face’s geometry, and no external data source.

IIan
81% match