Fork of Network

100%

Fork of Network

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

Forked from Network

This interactive network visualization maps relationships between seven main characters from *The Simpsons*, with nodes colored by group (Simpsons, Neighbors, Boss) and link thickness encoding relationship strength from 1–9. Using the `d3.forceSimulation` API with `d3.forceLink`, `d3.forceManyBody` for repulsion, and `d3.forceCenter` plus `d3.drag()` for interactivity, nodes settle into a spread layout and can be repositioned by the viewer. The SVG renderer draws circular nodes with bold labels below each character, while the connection values are defined in the static `dataset` and mapped to stroke widths via `d3.scaleLinear`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Network

This network visualization maps relationships among six Game of Thrones characters, with links representing interactions and line thickness encoding connection strength. Nodes are colored by house affiliation using a categorical color scale. The code creates a force-directed graph using `d3.forceSimulation` with link distance, charge repulsion, and centering forces. SVG circles and text labels render the nodes, while `d3.drag` enables interactive repositioning. Link stroke widths map relationship values through `d3.scaleLinear`, and the layout updates continuously via the simulation's tick event.

Ssrinathkarumuru@my.unt.edu

81% match

Loading thumbnail…

Fork of Network

This example visualizes a small network of characters from *Les Misérables*, colored by group and connected by a single link. Using D3.js v5, it loads data from a JSON file and applies a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Circles represent nodes in SVG, positioned dynamically on each simulation tick, while lines show edges with stroke width proportional to link value. Node colors come from a `d3.scaleOrdinal` with `d3.schemeCategory10`.

SSnapika

80% match

Loading thumbnail…

Fork of Network

This network visualization displays relationships between movie characters, with each node color-coded and shaped by role: Hero (blue star), Villain (red triangle), Sidekick (green circle), and Mentor (orange square). The example builds a force-directed graph using `d3.forceSimulation` with link, charge, and center forces, rendering nodes as SVG paths via D3’s symbol API. Links are drawn as lines, and labels follow node positions during the simulation. Nodes are draggable using D3’s drag interaction, which restarts the simulation with a higher alpha target for responsive movement.

Cchandanamahesh0215@gmail.com

80% match

Loading thumbnail…

Fork of Force Network

This force-directed network graph maps relationships between actors, directors, and films from a JSON dataset. It uses D3 v6's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` physics, plus `d3.drag` for interactive node repositioning. SVG rendering shows colored nodes (by group), labeled with names, and links labeled with truncated relationship types (e.g., "Acte..." for "Acted in"). Line thickness reflects edge value, and arrowheads are defined via SVG markers.

Ssgzzhinde

79% match

Loading thumbnail…

Fork of Fork of ice 8_network

This interactive network diagram visualizes relationships between programming-related nodes, with circles colored by group and labeled with node IDs. The layout is computed using d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter forces, updating line, circle, and text positions on each tick. Node and link data are loaded from remote CSV files via d3.csv. The SVG canvas is titled “Programming Network,” with nodes rendered as circles and connections as gray lines.

Kkanaparthieshitha@gmail.com

79% match

Loading thumbnail…

Fork of Fork of D3 Starter

This interactive network graph visualizes a small set of six individuals (Alice through Frank) connected by six social links. Using D3 v7’s force simulation (`d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`), the nodes and links are rendered as SVG circles, lines, and text labels. The simulation automatically positions the network, while drag behavior (`d3.drag`) lets users move individual nodes in real time, with the layout updating on each tick event.

Kkmuddana@gitam.in

79% match

Loading thumbnail…

Fork of Force Network

A network chart displays relationships between actors, directors, and films, with nodes colored by group and sized by their connection count. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while SVG lines represent links. Drag-and-drop interaction is implemented via d3.drag, and hover styling highlights nodes with a CSS class.

NNikhilMakkena

79% match

Loading thumbnail…

Fork of Fork of Fork of Force Network

This interactive force-directed network visualizes connections between actors, directors, and films. Using D3 v6, it employs `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Data from `data.json` is rendered as SVG circles and connecting lines, with markers indicating relationships. Nodes are draggable, and relationship text labels are shown but incomplete.

Ssaiteja0725

79% match