tsmithv11

@tsmithv11·4 public vizzes

Framework

This example demonstrates how to build a simple interactive framework using D3.js by modifying SVG elements in response to user input. It displays a blue rectangle centered within an SVG canvas, and clicking on the rectangle changes its fill color to green. The code uses D3 selections and the `select` and `arc` imports from the d3 module, with the `on("click", ...)` method to attach the event handler. The visualization relies on D3 v5 and renders directly to SVG with dimensions of 960 by 500 pixels.

Apr 19, 2020

Loading thumbnail…

Framework

This visualization shows a simple yellow smiley face drawn with SVG shapes, centered in the frame. Its eyebrows animate by moving upward and then returning to their original position over a repeating sequence. The code uses D3 v5 to append and style circles, rectangles, and a path generated with `d3.arc()`. Transitions chain with `.transition().duration(2000)` to create the eyebrow movement, while the eyes, mouth, and overall composition remain static.

Apr 19, 2020

Loading thumbnail…

Framework

This visualization displays a network of interconnected nodes arranged in a circular layout, with links drawn as curved paths and nodes rendered as small filled circles. The scene uses D3 v5’s `d3.forceSimulation` to position nodes with collision and link forces, while Canvas is used for rendering via `d3.forceCanvas` (or equivalent). A subtle radial gradient background and semi-transparent node colors create depth, and the simulation updates continuously to show stabilized force-directed behavior. No external data source is specified; the layout is generated procedurally within the code.

Apr 19, 2020

Loading thumbnail…

World Countries Tree

A hierarchical tree diagram shows the geographic organization of world countries, grouped by continent and subregion, with the root labeled "World" and leaves naming individual nations. The layout uses a horizontal tree where text size decreases with depth, and zoom and pan are enabled via the d3.zoom API. The code loads a JSON hierarchy with d3.json, applies d3.tree and d3.hierarchy for layout, and renders SVG paths and text with d3.linkHorizontal. Labels use Playfair Display font with white text shadows for readability.

Apr 18, 2020