Fork of Network graph

100%

Fork of Network graph

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 9, 2022

This network graph visualization displays character relationships from the Harry Potter universe, with nodes representing named characters and links showing connections between them. The graph uses node size and link thickness to convey relationship strength. The visualization is built with D3.js v4, utilizing the `d3.layout.force` API for the force-directed layout and SVG rendering for nodes and links. The data is loaded from a local JSON file containing node names and group assignments. The graph features interactive dragging capabilities, and custom styling applies yellow node fills with blue connection lines on a red background.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

FORK OF NETWORK GRAPH

This network graph visualizes friendships and mutual connections among a set of named individuals, with node size and link thickness representing connection weights. The force-directed layout uses `d3.layout.force` to position nodes and links, with SVG circles for nodes and lines for edges. Data comes from a local JSON file containing node names, group assignments, and weighted links. The graph renders in an SVG container, with node labels displayed as text elements that update positions during the simulation ticks.

Mmandalasaikrishna007

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

78% match

Loading thumbnail…

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

BBhavanaGIrni

78% match

Loading thumbnail…

Fork of fork

This social network visualization displays nine named individuals connected by weighted links, with node positions determined by a force-directed layout. Using the D3 v4 library through the `d3.layout.force()` API, the code creates a SVG canvas with yellow circular nodes labeled with each person’s name, while black link strokes vary in thickness according to the connection weight. The network is interactive, allowing dragging of nodes via the force layout's drag functionality, with gravity, distance, and charge parameters controlling the spatial arrangement. Data comes from a local JSON file containing node group assignments and link weights.

TTekmal-Bhavana

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

78% match

Loading thumbnail…

Fork of Social Network Graph

The visualization displays a social network graph where purple nodes represent people, connected by blue arrows indicating friendship relationships. The network uses a force-directed layout powered by d3.forceSimulation, with link forces, charge forces, collision detection, and centering. Nodes are rendered as SVG circles with labels, and can be dragged interactively. Arrow markers are defined in SVG defs, while node highlighting on hover uses CSS classes. The graph loads from a JSON data file containing explicit source and target person names.

Rradhadevarapu

77% match

Loading thumbnail…

Fork of Network

This network graph visualizes character relationships from Les Misérables, with nodes representing characters colored by group membership and link thickness reflecting interaction strength. The SVG visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3.select and data joins render circles and lines. Node colors come from a d3.scaleOrdinal with schemeCategory10, and the simulation tick event updates element positions dynamically.

Yyejichun@naver.com

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

77% match