mach9github

@mach9github·4 public vizzes

Fork of Relation Graph with d3-force

This example visualizes a small entity-relationship diagram (ERD) of database tables and their columns. Table nodes are drawn as larger circles, column nodes as smaller ones, with links connecting tables to their columns and a join link between matching primary and foreign keys. The graph uses `d3-force` with `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes, while `draggraph` from d3-force enables user interaction. Node labels are added as SVG text elements, and pan/zoom is implemented via `d3.zoom`. The styling uses the `schemeCategory10` color palette from d3.

Sep 6, 2021

Loading thumbnail…

Fork of D3 Force Directed Graph - Music Artists

A force-directed graph maps music artists and their albums, with four main genre nodes connected by thick links and each album branching into smaller leaf nodes. The visualization uses D3 v6's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute layout, while SVG circles, lines, and text render the nodes and connections. Data is structured in a separate module, with node size and link distance varied by hierarchy level. The `drag` interaction lets users reposition nodes, and the simulation restarts on interaction.

Aug 29, 2021

Loading thumbnail…

Fork of Organization Graph Diagram

This interactive graph visualizes the network of connections within the Kenneth Rainin Foundation, using color-coded clusters to represent distinct organizations and their relationships. The visualization employs a force-directed layout, where nodes represent individual entities and links denote connections, with node size indicating hierarchy level from main organizations to child nodes and leaves. Built with D3 version 6, the code utilizes the `d3.forceSimulation` API for physics-based positioning, including many-body repulsion, link constraints with custom distances, and centering forces. Users can drag nodes to explore the network, and the simulation dynamically adjusts node positions and link paths in response to interaction.

Aug 29, 2021

Loading thumbnail…

Fork of Testing D3 force layout

This example visualizes a network of nodes and links loaded from a local JSON file, where each node represents an entity with a name, group, and centrality value, and links connect them with betweenness scores. It uses D3 v3’s `d3.layout.force` to simulate a force-directed layout with a fixed distance of 300, weak charge, and zero gravity, rendering nodes as GitHub favicon images with labels and links as gray SVG lines. The simulation updates node positions and link coordinates on each tick, constraining movement to the 960×500 viewport.

Aug 29, 2021