Owen Thiele

@mralwin·4 public vizzes

Fork of Force Directed Graph Starter

This example shows a force-directed network graph of characters from Les Misérables. The SVG renderer uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to compute the layout, with nodes and links drawn as circles and lines. The data, consisting of 77 character nodes grouped by affiliation and weighted links between them, is hardcoded in the script and fully visible in the source.

Dec 4, 2021

Loading thumbnail…

mouse follower

A yellow circle follows the mouse cursor inside an SVG canvas, updating its position in real time as the cursor moves. The example is built with React, using the `useState` hook to store mouse coordinates and an `onMouseMove` event handler on the SVG element to capture `clientX` and `clientY` values. The circle’s center is set to those coordinates, and the SVG’s width and height are fixed at 960 by 500 pixels.

Oct 4, 2021

Loading thumbnail…

Customizing axis

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes D3 axes by removing the default domain lines and tick marks on the left axis, while the bottom axis uses a custom tick formatter that abbreviates numbers (e.g., converting “G” to “B”). The visualization is rendered as SVG, with the data loaded from a CSV file and population values multiplied by 1000 in the preprocessing step.

Oct 3, 2021

Loading thumbnail…

Smiley Face Part I

A grid of eighteen smiling faces rendered as SVG components in React, each with randomized proportions for the face, eyes, and mouth. The code builds reusable React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the latter using d3’s `arc` generator to create a half-circle smile. All faces are centered in individual `svg` containers via a `FaceContainer`, and randomness comes from `Math.random` applied to each component’s props. The visualization demonstrates modular composition and d3 integration within a React rendering pipeline.

Aug 1, 2021