malipieroproject

@malipieroproject·5 public vizzes

Trying

A force-directed network diagram shows four main nodes—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—connected by links, with child nodes and smaller leaf nodes radiating from each. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter, rendering circles, lines, and text labels in SVG. Nodes are draggable, and colors come from a generated palette in colors.js. Data represents organizational connections from the Kenneth Rainin Foundation.

Feb 13, 2023

Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix, both rendered in SVG using D3 v6. The force layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while nodes are colored by group and draggable. Clicking a node highlights its corresponding row and column in the matrix, and vice versa, using shared link IDs. The data comes from preprocessed edge lists with weighted values, and zooming is enabled via `d3.zoom`.

Feb 11, 2023

Loading thumbnail…

Fork of Node-Link Diagram with Force-Directed Layout Using D3

This interactive force‑directed node‑link diagram visualizes the SOC‑FIRM‑HI‑TECH network from the Network Data Repository. Nodes represent individuals categorized into six historical periods, while links show connections between them. The layout is computed dynamically using `d3.forceSimulation` with many‑body repulsion, centering, and link forces, and supports dragging. The D3 v7 implementation renders SVG circles and lines, with node labels and tooltips. Data is loaded from CSV files containing node IDs and edge lists, and colors are assigned via a categorical scale.

Feb 11, 2023

Loading thumbnail…

Organization Network Graph

This example displays a force-directed network graph of an organization centered on a main node, with three primary categories branching into numerous unnamed leaf nodes. The visualization uses D3.js v7 with the `forceSimulation` API, applying `forceManyBody`, `forceLink`, and `forceCenter` to position nodes based on simulated physics. The SVG rendered output draws colored circles, connecting lines, and text labels, with drag interaction allowing users to manually reposition nodes. The data is generated programmatically with distinct color palettes for each hierarchy level, and the final layout emerges organically from the balance of attractive and repulsive forces.

Feb 11, 2023

Loading thumbnail…

Network Graph

A force-directed network graph visualizes the connections between a central node, "Malipiero," and two child nodes, "Opere" and "Libri," each with twenty small leaf nodes. Rendered as SVG circles, lines, and text, the layout is computed with d3.forceSimulation, using forceManyBody and forceLink to position nodes based on specified distances. The data for nodes and links is defined in a separate module.

Feb 5, 2023