heist Network graph

100%

heist Network graph

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

Forked from Fork of Social Network graph

This network graph visualizes character relationships from the show *Money Heist*, with nodes representing named characters and links indicating connections. The visualization uses a force-directed layout, powered by the custom `d3.layout.force()` API, to position nodes, while SVG circles and text labels render the graph elements. The graph's data is loaded from a local JSON file, and edge weights are encoded through link stroke widths. Node dragging is enabled via the `force.drag` interaction. The styling applies green strokes for links and red text for labels, creating a clear, interactive character map.

AI-generated description

MIT Licensed

Similar vizzes

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

76% 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

74% match

Loading thumbnail…

Network Graph

This network graph visualizes relationships among six people using a force-directed layout. It loads data from an external JSON file specifying nodes and weighted links, then renders nodes as orange circles with name labels and green lines for connections. The example uses D3 v4 and v2 APIs simultaneously, relying on `d3.layout.force` to simulate the physical forces that position the nodes. Link thickness scales with the square root of each connection’s weight, while a tick handler updates the SVG elements’ positions during the simulation.

SSai Kaushik

74% match

Loading thumbnail…

Network Chart

This network chart visualizes connections between named individuals using a force-directed layout. Nodes are rendered as pink circles with violet text labels, while orange links between them have stroke widths proportional to the link weight data from the local `graphFile.json`. The visualization uses the older `d3.layout.force` API (from d3 v4) with gravity, charge, and distance parameters to position the graph, and supports interactive dragging of nodes. The SVG is drawn dynamically, with each node’s position updated on every tick event.

PPavaniMangugari

74% match

Loading thumbnail…

Network graph of social connection

This example shows a network graph of social connections, with nodes representing characters from a fictional world and links indicating relationships between them. The graph uses D3’s force layout (d3.layout.force) to position nodes, which are rendered as purple circles with dark outlines and labeled with names. Links appear as black lines, and link thickness is set based on a numeric weight attribute when present. Users can click and drag nodes to rearrange the layout, which updates in real time. The visualization reads data from a local JSON file and renders entirely in SVG.

SSamanvitha1

74% match

Loading thumbnail…

network

This network graph visualizes the relationships between ten named individuals (John, Alice, Bob, etc.) using a force-directed layout. Nodes are rendered as orange circles with blue text labels, while links between them are drawn as black lines whose stroke width corresponds to a numeric `weight` attribute from the JSON data. The visualization uses the older `d3.layout.force()` API from d3.v2, which is loaded alongside d3.v4, to simulate physics with gravity, distance, and charge parameters. The SVG elements are updated on each tick of the force simulation, and nodes are draggable via the `force.drag` call.

SSai Hemanth Babu Sunkari

73% match

Loading thumbnail…

Network Graph

A network graph displays seven named nodes connected by weighted links, with node sizes and link thickness reflecting connection strength. The data, loaded from a JSON file, is rendered as an SVG using D3.js v4's force layout, which applies gravity, charge, and distance parameters to position nodes dynamically. Users can click and drag nodes to rearrange the network, while node labels and red-bordered yellow circles remain visible. The visualization uses `d3.layout.force` for simulation and `force.drag` for interactivity, with tick events updating link coordinates and node transforms.

JJerlineJJ

73% match

Loading thumbnail…

Network graph

A network graph visualizes connections between named entities, such as "Oathkeeper," "Herokiller," and "johnnyDeep," with nodes colored by group and links weighted by line thickness. The graph uses D3.js v4 with a force-directed layout, implemented via the `d3.layout.force` API, which applies gravity, charge, and distance parameters to position nodes. Data is loaded from a local JSON file, and the SVG rendering updates node coordinates and link endpoints on each simulation tick. The interface includes a pink background and drag interaction for repositioning nodes.

SSNarasimhar

73% match