Jacob Pingel Lauridsen

Prototype

A radial network diagram shows one central node connected to eight related application nodes, with each cluster color-coded by a palette from Paletton. The visualization uses a D3 force simulation (`d3.forceSimulation`) with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes and links in SVG. Users can drag nodes to reposition them, which updates the simulation's alpha target and restarts it. Node size and link distance are predefined constants, and the color scheme is generated programmatically from a custom colors module.

Mar 7, 2023

Untitled

A small directed network of four application nodes, labeled APP-021, APP-2804, APP-600, and APP-478, is rendered as dark red circles with white text. d3.forceSimulation applies a charge strength of -2230, a center force, and a link force to position the nodes, while a drag handler lets users move them and restart the simulation. Links are drawn as black lines via SVG line elements, and node positions are updated on each simulation tick.

Mar 7, 2023

Organization Graph Diagram

This example shows an organization graph diagram, where colored circles represent main entities, children, and leaf nodes, with connecting lines illustrating relationships between them. The graph uses a force-directed layout to position nodes based on simulated physical forces. Built with React and D3 v6, the implementation applies `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions. SVG circles, lines, and text are rendered and updated on each simulation tick, with drag interaction enabled via the `drag` API. The color palette is defined in a separate module using Paletton-generated schemes.

Feb 13, 2023

Prototype of force Simulation

A force-directed graph represents a network of application and host nodes. The visualization uses D3’s `forceSimulation` with `forceManyBody` and `forceLink` to arrange nodes, with larger main nodes connected by longer links and smaller leaf nodes clustered nearby. Node colors come from a predefined palette, and each node’s size determines its radius. Users can drag nodes, which sets fixed positions and restarts the simulation. The example is built with React and renders to SVG, using D3 v6.

Feb 13, 2023

Fork of Prototype of force Simulation v2

This example visualizes a hierarchical network of servers and their applications using a force-directed graph. It shows four main server nodes, each connected to child application nodes, with some child nodes having leaf nodes attached. The visualization demonstrates bidirectional links between paired servers and uses node size and color to distinguish hierarchy levels. The code implements this using D3 v4's `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` APIs, with drag interaction handling and SVG rendering of circles, lines, and text labels.

Feb 4, 2023

Organization graph diagram - visualization

This example uses a force-directed graph to visualize relationships between organizational servers and their associated applications. It shows four main nodes (servers) connected by links, with child nodes (applications) and small leaf nodes branching from them. The visualization leverages d3.forceSimulation with forceManyBody, forceLink, and forceCenter forces to position nodes, while the d3.drag interaction allows manual repositioning. Colors are assigned per server group, and SVG circles, lines, and text labels render the final output.

Jan 24, 2023

Untitled

A force-directed graph displays a small hierarchy of D3 module names, with nodes connected by links to show parent-child relationships. The visualization uses d3.layout.force to simulate physical forces, while a custom tick function pushes source nodes upward and target nodes downward, creating a weak tree structure. Nodes are rendered as colored circles using d3.scale.category20, and the data comes from a local graph.json file containing seven nodes and six links.

Jan 23, 2023

Fork of Rending data with react

This visualization displays CSS named colors as a full radial burst, with each color represented by a wedge whose fill matches its RGB hex value. The code loads color data from a CSV file using `d3.csv`, then computes the pie layout with `d3.pie` and renders the arcs via `d3.arc` inside an SVG. React manages the component state, rendering each path with a fill derived from the data’s `'RGB hex value'` column, while D3 v7 handles the data loading and geometry calculations.

Rending data with react

This example renders the CSS named colors as a vertical stacked bar chart, with each color occupying a thin rectangular slice across the width of the viewport. The visualization loads the color data from a CSV file using D3’s `csv` utility, then maps each row to a styled `<div>` element with a background color set to the RGB hex value from the dataset. React manages the asynchronous data loading through the `useEffect` hook and renders the list of colored strips once the data arrives.

loading data with react d3

This example demonstrates how to combine React state management with D3 data-loading utilities to display a brief summary of a CSV dataset. The app fetches a CSS named colors dataset from a GitHub gist and shows a message with the formatted data size in kilobytes, row count, and column count. It uses React’s `useState` and `useEffect` hooks to asynchronously load and store the data via `d3.csv`, while `d3.csvFormat` calculates the rendered size. The page initially shows a “Loading.....” placeholder until the fetch completes, rendering the result as plain text in a `<pre>` element.

Fork of Loading and Parsing CSV Data

This visualization demonstrates how to load and parse CSV data using D3 v7, displaying basic statistics about the dataset in a large text format. The example fetches a CSV file containing CSS named colors from a GitHub Gist, then uses `d3.csv` to parse it asynchronously and `d3.csvFormat` to measure the raw data size. It outputs the file size in kilobytes, the total row count, and the number of columns into a `<pre>` element. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse` for manual text parsing.

Fork of Mouse follower

This React and SVG example displays a single circle that follows the mouse cursor across a 960 by 500 canvas. The circle’s position updates in response to mouse movement events, initially centered on the screen. The application uses React’s `useState` and `useCallback` hooks to manage the cursor coordinates, and ReactDOM renders the SVG element with an `onMouseMove` handler. The visualization demonstrates real-time interaction by directly mapping the cursor’s client coordinates to the circle’s `cx` and `cy` attributes.

Mouse follower

A yellow circle follows the mouse cursor across a 960 by 500 SVG canvas. Built with React and ReactDOM, the app tracks pointer coordinates via an `onMouseMove` handler on the `<svg>` element, updating the circle's `cx` and `cy` attributes through component state. The example demonstrates reactive SVG rendering driven by user interaction, with no external data source.

Loading and Parsing CSV Data

This example demonstrates how to load and parse external CSV data from a GitHub gist URL using the Fetch API and asynchronous JavaScript. The code defines an `async` function that fetches a text file, converts the response to a string, and logs the raw CSV contents to the browser console. It uses `fetch` and `response.text()` to retrieve the data, with a commented-out alternative approach showing a promise-chain version. The visualization itself is minimal, focusing entirely on the data-loading step rather than rendering any graphical output.

Fork of Face part 1

This example shows a grid of five randomly generated smiling faces, each rendered as a yellow circle with black eyes and a curved mouth. The faces are built from reusable React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) that compose SVG elements within a shared `FaceContainer`. Each face uses randomized numeric properties for eye offset, eye radius, and mouth dimensions, generated with `d3.range` and `Math.random` in the main `App` component. The `Mouth` component draws its path using the `d3.arc` API, while the overall rendering relies on React’s virtual DOM to manage the SVG output.

Face part 1

This example renders a simple, stylized smiling face as an SVG graphic using React and D3.js (v7). The face is composed of a yellow circular head with a black outline, two black eyes positioned symmetrically, and a curved mouth created with D3's `arc()` function, which defines the mouth's inner and outer radii and angular range. The drawing is centered within an 960x500 viewBox, with all coordinates calculated relative to the center point via a `transform` translation. The code uses React's component model to declaratively construct the SVG elements, while D3 provides the geometric path for the mouth arc.