SageSwabe

@SageSwabe·4 public vizzes

Untitled

This example shows a single red circle moving erratically across an SVG canvas under the influence of a force simulation. The circle’s position updates on every tick of a d3.forceSimulation, with the code reassigning new random forceX and forceY forces relative to the node’s current location. After the first tick, the initial center force is removed, leaving only these randomized forces to drive the motion. The visualization uses d3.v4 and SVG circle elements, with the simulation’s tick handler directly setting the circle’s cx and cy attributes.

Oct 16, 2022

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows five circles in a force-directed simulation, arranged and animated by D3’s physics engine. The code creates a `d3.forceSimulation` with five empty nodes, applies `d3.forceManyBody` for repulsion and `d3.forceCenter` to keep the cluster centered, then updates circle positions on each tick. The visualization uses an SVG generated by D3’s selection and `.join` pattern, with the simulation running entirely in the browser against empty data objects, producing a simple, abstract node layout.

Oct 16, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This fork of the Bowl of Fruit example demonstrates the general update pattern for handling special cases in D3 v5 with SVG rendering. It shows a static bowl containing apples and a lemon, with fruits being removed and modified over timed intervals. The code uses `d3.select`, `d3.range`, `scaleOrdinal` for color and radius mapping, and the `.merge()` API to manage enter, update, and exit states for groups representing each fruit. The data is a JavaScript array of fruit objects that is mutated to trigger re-renders.

Oct 15, 2022

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.

Oct 15, 2022