wiebsS

@wiebsS·6 public vizzes

Fork of Force Directed Graph Starter

This example shows a force-directed network of twenty-three nodes, where one central hub labeled “Community Vision” connects to many smaller unnamed nodes, while two larger labeled nodes (“Arts Web” and “Silicon Valley Creates”) branch from it. Built with d3.forceSimulation, it applies d3.forceManyBody for repulsion, d3.forceLink for edges, and d3.forceCenter to keep the graph centered in an SVG canvas. Node radii derive from data size values, and labels render as text elements positioned each tick. The data uses numeric link indices to define source–target relationships.

Jul 24, 2023

Loading thumbnail…

Organization Network Graph

A force-directed network graph displays three nodes (Alice, Bob, Carol) connected by two links in a simple organizational structure. The example uses the D3.js library's `forceSimulation` API with `d3.forceManyBody()`, `d3.forceLink()`, and `d3.forceCenter()` to compute node positions. The visualization renders as SVG circles appended to the container using `d3.select('#container')`.

Jul 21, 2023

Loading thumbnail…

Visualizing Data with React & D3

This example visualizes CSS named colors as a pie chart, with each slice filled by the corresponding color from the data. It loads a CSV of named colors using D3’s `csv` utility, then computes pie slice angles with `d3.pie` and renders the arcs as SVG paths via `d3.arc`. React manages the application state, displaying “Loading…” until the asynchronous data fetch completes, then renders the chart inside an SVG element. The code uses the `useState` and `useEffect` hooks to handle the data lifecycle.

Jul 20, 2023

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas. The visualization demonstrates real-time interaction by updating the circle's center coordinates to match the pointer’s position. Built with React 16.9, it uses the `useState` hook to track mouse coordinates and the `onMouseMove` event handler on the SVG element. The rendering is handled entirely through SVG, with the circle’s `cx` and `cy` attributes updated on every mouse movement.

Jul 19, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL using the JavaScript `fetch` API. The code calls `fetchText` on a CSV file containing CSS named colors, then logs the raw text response to the console. No visual output is produced; instead, it serves as a minimal, bare-bones HTML page focused solely on the asynchronous process of retrieving and reading text-based data. The example relies on the built-in `fetch` and `response.text()` methods rather than external parsing libraries like Papa Parse.

Jul 19, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a grid of 15 cartoon smiley faces, each with randomly generated eye sizes, eye offsets, and mouth dimensions. React components structure the SVG visualization, while D3’s `arc` generator creates the mouth paths. A yellow background circle, two black eye circles, and a curved mouth are composed inside a transformed SVG group per face. The code uses React 16.9 and D3 v5 to render repeated, individually varied facial expressions.

Jul 19, 2023