Let's make a rolling ball with D3.js

100%

Let's make a rolling ball with D3.js

✓ Published0🌍 Public

Last edited May 21, 2020

Created on May 19, 2020

Forked from Let'S make a face with D3.js

This example demonstrates how to build a rolling ball animation using D3.js v5 with SVG rendering. The code constructs a circular graphic with alternating black and orange arc segments using the `d3.arc` generator, then applies transitions to rotate the entire group element. While the primary ball design is commented out, the active code adds a simple paragraph element styled with red text, showing basic SVG selection and manipulation. The implementation imports `select` and `arc` from D3 and includes a custom text measurement utility for calculating string dimensions.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A red ball scales down and moves upward along a road drawn as a black trapezoidal path, creating the illusion of perspective. The animated transition uses D3.js v5's `transition.attr` to change the circle's radius and y-coordinate over two seconds. The SVG rendering includes a static road path defined with a template literal, while the ball's animation is the sole dynamic element. No data source is used; the example demonstrates basic D3 shape and transition APIs.

IIgor Chernega

81% 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

77% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso

77% match

Loading thumbnail…

Let's Make a face with D3.js

The example builds a cartoon face from basic SVG shapes using D3.js v5. It draws a yellow circle for the head, black circles for the eyes, and an arc-based path for the mouth via d3.arc. The right eye uses chained transition.attr calls to animate its vertical position twice, creating a blinking effect. The code imports select and arc directly from the d3 module and renders everything with SVG elements in a fixed 960×500 viewport.

DDhaval Potdar

77% match

Loading thumbnail…

Let's make a face with d3.js

This example builds a cartoon face from a red circle with a black stroke, two animated eyes, an arc-shaped patch of hair, and a mouth created with d3.arc(). The left and right eyes use chained transition() calls to shift their cx attributes over two seconds each, creating a subtle side-to-side movement. The SVG is centered within a 960×500 viewport, and the face is grouped and translated to the middle of the canvas. The code imports select and arc from the d3 library and uses v5.

BBoyan Petrov

77% match

Loading thumbnail…

Let's make a map D3.js

This example demonstrates how to build a simple SVG map using D3.js version 5. The code selects an SVG element from the HTML and reads its width and height attributes to set up the canvas. It imports the `select` and `arc` functions directly from the D3 library, preparing the foundation for drawing geographic paths or shapes. The visualization relies on the D3.js framework with SVG rendering, as specified in the metadata, and is accompanied by a tutorial video link in the README. The map itself is not yet populated with data in the provided JavaScript.

Rryanrholler

76% match

Loading thumbnail…

Lets Make a Face With D3.js

This example uses D3.js v5 to draw a simple face composed of SVG shapes. It renders an orange circle for the head, two black circles for eyes, and an arc-shaped mouth created with the `d3.arc` helper, positioned via an SVG group transform. The code imports `select` and `arc` from D3, sets dimensions from the SVG attributes, and explicitly places each element using calculated coordinates and hardcoded offsets, with no external data source.

Kkevgammer689

76% match

Loading thumbnail…

Trying out D3.js

A yellow circle with a black outline, eyes, and a downward-curving arc mouth forms a static smiling face. The animation is limited to the eyebrows, which slide down and back up over two seconds using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 to build the SVG via appended groups and shapes, with elements positioned using explicit `attr` transforms and dimensions read from the SVG's height and width attributes.

JJuan David Bolaños Rojas

76% match