Azazello13

@Azazello13·7 public vizzes

Fork of Fork of Fork of Organization Graph Diagram

This example uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to render a network graph of connections from the Kenneth Rainin Foundation’s grantee ecosystem. Nodes represent organizations, with color-coded main nodes and smaller child or leaf nodes, linked by colored strokes. The SVG drawing updates on each tick, and drag interaction lets users reposition nodes while the simulation restarts. The data is hand-defined in data.js, with layout distances and strengths tuned to create a clustered yet readable diagram.

Dec 8, 2021

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

A force-directed graph shows the network of connections between organizations in the Kenneth Rainin Foundation's ecosystem. Four main nodes with distinct colors branch into child nodes and small unlabeled leaves, while links connect the main clusters. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, with drag interaction for manual rearrangement. Data comes from a custom data.js file, rendered as SVG circles, lines, and text labels.

Dec 8, 2021

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed network diagram maps connections among organizations affiliated with the Kenneth Rainin Foundation, grouping related entities around larger main nodes with smaller child and leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute node positions, while links are drawn as colored SVG lines based on a color palette generated via Paletton. Node labels appear as SVG text, and a drag interaction lets users reposition nodes to explore the graph dynamically.

Dec 8, 2021

Loading thumbnail…

Organisational Network Graph

This example visualizes a small organisational network using a force-directed graph. It shows three nodes representing individuals (Alice, Bob, Carol) connected by two directed links, illustrating a simple hierarchical chain. The visualization is built with D3 v7, using `d3.forceSimulation` to position the nodes and `d3` module imports for the simulation. The code defines the node and link data as JavaScript arrays, with links specified by zero-based indices referencing the node array. The simulation runs without explicit rendering logic; the example primarily demonstrates the data structure and force layout setup rather than complete visual output.

Dec 8, 2021

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page at a very large font size. It renders the message using a CSS class that sets the font size to 13em and aligns the text horizontally. The page is a bare minimum HTML document that demonstrates the use of inline CSS and JavaScript. The code contains a single `div` element with the class `message`, and no JavaScript logic or external libraries are present.

Dec 8, 2021

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a white page, rendered at a massive 13em font size. It demonstrates a basic static web page using a plain HTML structure, inline CSS for styling, and no JavaScript. The page relies solely on the browser’s default rendering engine to draw the text, with no external libraries, frameworks, or data sources involved. The code is a minimal, self-contained HTML document.

Dec 8, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a static HTML page with the message “Hello HTML!” centered in large, 13em text. The styling comes from a CSS rule applied to a `.message` class within a `<style>` tag, and the page uses no external JavaScript libraries or data sources. The rendering approach is plain HTML and CSS, with the body containing a single `div` element to present the text. It serves as a minimal demonstration of combining HTML structure, CSS styling, and file organization in a React framework project.

Dec 8, 2021