Skip to main content
Log in
M

MariusPaulRichter

@MariusPaulRichter·11 public vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph visualization maps the grantee network of the Kenneth Rainin Foundation. Circles sized by hierarchy level—main nodes, child nodes, and leaves—use a custom four-color palette from `colors.js`, with links tinted to match their source. Built with d3.forceSimulation, forceLink, and forceManyBody, the layout positions nodes dynamically, while dragInteraction allows manual repositioning. SVG rendering draws lines, circles, and text labels that update on each simulation tick.

Apr 4, 2022
Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This D3.js force-directed graph visualizes the network of connections among organizations linked to the Kenneth Rainin Foundation, with a central cluster of main nodes (Arts Web, Social Impact Commons, Community Arts Stabilization Trust, AmbitioUS) connected by colored links and surrounded by smaller child nodes and leaf nodes. It demonstrates the `d3.forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces, rendering nodes as SVG circles with varying sizes and labels. Interactive dragging via `d3.drag` lets viewers reposition nodes, while link distances and node colors are preconfigured in a data file. The example uses data from the foundation’s network and generates a structured hierarchy through explicit parent-child relationships.

Apr 3, 2022
Loading thumbnail…

Fork of Organization Graph Diagram

This force-directed graph maps the network of connections among the Kenneth Rainin Foundation’s grantee organizations, with nodes colored by category via generated palettes and sized by hierarchy level. It renders as SVG circles and lines using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, plus drag interaction for repositioning. Node data is assembled programmatically in data.js, defining main, child, and leaf nodes with custom link distances. Labels appear on all named nodes, while unnamed leaves remain unlabeled.

Apr 3, 2022
Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This D3.js force-directed graph visualizes the network of connections among organizations linked to the Kenneth Rainin Foundation, with a central cluster of main nodes (Arts Web, Social Impact Commons, Community Arts Stabilization Trust, AmbitioUS) connected by colored links and surrounded by smaller child nodes and leaf nodes. It demonstrates the `d3.forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces, rendering nodes as SVG circles with varying sizes and labels. Interactive dragging via `d3.drag` lets viewers reposition nodes, while link distances and node colors are preconfigured in a data file. The example uses data from the foundation’s network and generates a structured hierarchy through explicit parent-child relationships.

Apr 3, 2022
Loading thumbnail…

Fork of Organization Graph Diagram

This force-directed graph maps the network of connections among the Kenneth Rainin Foundation’s grantee organizations, with nodes colored by category via generated palettes and sized by hierarchy level. It renders as SVG circles and lines using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, plus drag interaction for repositioning. Node data is assembled programmatically in data.js, defining main, child, and leaf nodes with custom link distances. Labels appear on all named nodes, while unnamed leaves remain unlabeled.

Apr 3, 2022
Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections among Kenneth Rainin Foundation grantees, using colored nodes and links to distinguish major organizations from their child projects and leaves. It uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute layout, while SVG circles, lines, and text render the graph with drag interaction. Data is manually defined in data.js, with colors generated via Paletton.

Apr 3, 2022
Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed organization graph shows the relationships between five main nodes—Mama, Papa, Felix, Jutta, and Oma—each linked to child nodes with numerous leaf connections. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while SVG circles and lines render the network. Drag interaction allows manual repositioning, and node sizes vary from main nodes (40px) to leaves (5px), with colors defined in a separate colors.js module. The data structure is generated programmatically in data.js.

Mar 31, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text "Hello HTML!" in a large, centered font as the primary visualization. Built with plain HTML, CSS, and JavaScript, the page applies a CSS style rule to set the font size and alignment of the message. No external libraries or data sources are used. The rendering approach relies entirely on the browser’s native HTML and CSS layout engine, demonstrating a minimal starter template for web-based visualizations.

Mar 30, 2022
Loading thumbnail…

Untitled

This chart shows a simple directed network of three people—Alice, Bob, and Carol—rendered as uniform circles linked by two directed edges in a force-directed layout. The simulation calculates their positions using the D3.js `forceSimulation` API, combining `forceManyBody`, `forceLink`, and `forceCenter` forces. As the simulation ticks, the circles’ `cx` and `cy` attributes update based on each node’s current `x` and `y` coordinates, creating a dynamic, physics-based arrangement within the SVG canvas.

Mar 30, 2022
Loading thumbnail…

Fork of HTML Starter

This is a minimal web page that displays the text “Hello HTML!” centered in the browser window, styled with a large 13em font size via CSS. The example uses core HTML, CSS, and JavaScript in a single file, with the visual output driven entirely by a static `<div>` element and its associated CSS class. It serves as a bare-bones template for understanding how a simple HTML document is structured, with no external libraries or frameworks involved.

Mar 29, 2022
Loading thumbnail…

Document

This example shows a minimal force-directed network graph with three nodes (Alice, Bob, Carol) and two directed links, rendered as circles in an SVG. The nodes are positioned through a D3 force simulation using `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter`. On each simulation tick, the circles’ `cx` and `cy` attributes update to reflect the computed node positions. Data is defined inline in the script, and the visualization is built with D3 v6 and SVG.

Mar 29, 2022