Fork of Network Graph

100%

Fork of Network Graph

✓ Published1🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This interactive network graph depicts a crime investigation, with nodes representing a murder, victims, suspects, and a witness, connected by weighted links. The visualization uses a traditional force-directed layout to position the nodes, allowing users to click and drag them around the canvas. Built with React and D3 v4, the graph is rendered as an SVG and loads its data from a JSON file. The code relies on the deprecated `d3.layout.force` API and `d3.select` to manage the simulation and rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Network Graph

This interactive network graph visualizes a murder investigation’s social structure. It displays seven nodes representing roles—such as "Murder," "Victim 1," "Suspect 1," and "Witness"—connected by undirected, weighted links. The visualization uses D3.js v4 with the `d3.layout.force` API, which applies a force-directed layout to position nodes. The data originates from `graphFile.json`, loaded via `d3.json`. Nodes are rendered as draggable circles with labels, and links are drawn as lines with stroke widths proportional to the link weights, leveraging SVG for output.

Aaashrithd4

93% match

Loading thumbnail…

Fork of Network Graph

A fork of a D3.js network graph visualizes a small crime scenario with nodes for a murder, victims, suspects, and a witness. The force-directed layout, created with `d3.layout.force`, positions these nodes and links them by weighted connections. Purple links have stroke widths proportional to the square root of each link’s weight, while yellow circular nodes are draggable. Node labels display each role. The graph loads data from `graphFile.json` and renders entirely as SVG elements, with links as lines and nodes as groups containing circles and text.

DDaMei1993

91% match

Loading thumbnail…

Fork of Network Graph

This example shows a small network of characters involved in a crime investigation, with nodes named for suspects, victims, and an eyewitness. The graph uses a force-directed layout to position seven nodes and six weighted links, where line thickness corresponds to the link’s weight value. The visualization is rendered as an SVG using D3.js version 4’s `d3.layout.force` API, and nodes are draggable circles with labels. Data is loaded from an external JSON file containing node groups and link weights.

Yyaswanthsen

90% match

Loading thumbnail…

Fork of Network Graph

A force-directed network graph visualizes links among nodes representing a murder, victims, suspects, and a witness. Node connections use weighted lines, with stroke width proportional to link weight, while circles are colored yellow with purple borders. The code employs d3.layout.force for simulation, loading JSON data via d3.json, and renders SVG elements. Node dragging is enabled using force.drag, and text labels display each node's name. The visualization updates continuously through force tick events, repositioning nodes and links dynamically. The rendering uses SVG for the graph output.

Iii-kc

90% match

Loading thumbnail…

Fork of Network Graph

This fork of a network graph displays relationships among nodes representing a murder, victims, suspects, and a witness, with link weights indicating connection strength. The visualization uses d3.forceSimulation to position nodes and render SVG circles and text labels, with purple links and yellow node circles styled via CSS. Data comes from an inline JSON file containing seven nodes and seven weighted links. The code loads both d3.v4 and an older d3.v2 script, though the simulation primarily relies on the v4 API.

VVaseem Naazleen Shaik

89% match

Loading thumbnail…

Fork of Network Graph

A force-directed network graph depicts relationships between murder case entities, including victims, suspects, and a witness. Nodes are positioned by a physics simulation using the D3.js `d3.layout.force()` API, with link stroke width scaled by the `weight` attribute from the JSON data. The SVG output uses `d3.select` and `.append` to render purple links and yellow circles, with drag interaction enabled via `force.drag`.

Xxie ming better

88% match

Loading thumbnail…

Fork of Network Graph

This example shows a small force-directed network graph of entities related to a murder case, with seven labeled nodes (such as "Murder," "Victim 1," and "Suspect 1") connected by weighted links. It uses D3 v4’s `d3.layout.force` to position the nodes, with a gravity of 0.05 and charge of -100, while the SVG rendering draws circles and text labels. Link stroke width encodes the weight field from the JSON data, and nodes are draggable via `force.drag`. The graph loads its structure from `graphFile.json`.

Nnikhitha693

86% match

Loading thumbnail…

Network Graph

This network graph visualizes relationships among characters in a murder case dataset, with nodes representing roles like victims, suspects, and witnesses. The force-directed layout uses `d3.layout.force()`. Links are styled with purple strokes and scaled stroke widths based on each link’s weight, while nodes are circles with labels, rendered as SVG. The code loads data from `graphFile.json` using `d3.json` and enables dragging via `force.drag()`.

SSonuSriN

82% match