Brooke Joseph

@brookejoseph·2 public vizzes

graphs

This graph diagram visualizes the network of connections among concepts like Federated Learning, Edge Computing, and Machine Learning, using node size to distinguish main, child, and leaf nodes. It shows the relationships between these topics through linked nodes and colored edges. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute the layout, while drag interactions allow manual repositioning. Node and link data are defined in data.js, with colors sourced from colors.js, and the scene is rendered as SVG circles, lines, and text labels.

Mar 10, 2024

Loading thumbnail…

graph

This example shows a force-directed graph of interconnected arts organizations, with four main groups—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—each linked to child nodes and leaf nodes. The visualization uses D3 v6’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to layout nodes, while `drag` enables interactive repositioning. Node sizes vary by hierarchy level (main, child, leaf), and link distances are customized per connection. The data is defined in a separate `data.js` module, and the rendering draws colored circles, links, and text labels directly in an SVG container.

Mar 10, 2024