Network graph

100%

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This network graph visualizes LinkedIn connections between eight individuals, with nodes labeled by name and grouped by affiliation. Edge thickness encodes the reported connection weight between pairs. The graph uses a force-directed layout via `d3.layout.force()` with gravity, charge, and distance parameters, rendering nodes and links as SVG elements. Node positions update on each tick, and dragging is enabled through the force layout’s drag interaction. Data comes from an external JSON file containing node group assignments and weighted link indices.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Network map

This network map visualizes a small LinkedIn-style social graph, showing eight people as labeled circles and their connections as orange weighted lines. The graph uses a force-directed layout with D3’s `d3.layout.force()` to position nodes, with gravity, charge, and distance parameters controlling the spacing. The HTML/SVG canvas is built with `d3.select`, and node positions are updated on each tick via the force layout’s `on("tick")` event, while link thickness reflects the `weight` field from the JSON data.

SSaikiran2029

87% match

Loading thumbnail…

Network Graph

This network graph visualizes friendships among eight individuals, with nodes representing people and directed links showing the relationship between a source and target. The data comes from a local `data.json` file, and the layout is computed using `d3.forceSimulation` with forces for link distance, charge, collision, and centering. Rendered as SVG, nodes are draggable via `d3.drag`, and hovering highlights nodes with a color change. Links include arrow markers and vary in stroke style, while node labels display each person’s name.

Vvegurusaiprathyusha

83% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes relationships between eight people, with varying link thickness indicating stronger connections (value 1 vs. 5) and arrowheads marking directed edges. The SVG rendering uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, which users can drag interactively. Node highlighting via the `.nodeHover` CSS class occurs on mouseover. The code loads D3 v6 from UNPKG and reads relational data from a local `data.json` file, demonstrating ES6 module imports alongside the main visualization logic.

SSharankumar02

83% match

Loading thumbnail…

Network graph

A social network graph visualizes friendships among eight people, with nodes colored brown and labeled with names. Green links connect friends, and link thickness represents connection weight. The visualization uses D3.js v4, specifically the `d3.layout.force()` API for force-directed layout, with SVG rendering. The graph loads node and link data from an external JSON file, and nodes are draggable via `force.drag`. Text labels appear in red, and edge widths are calculated using the square root of each link's weight value.

BBajiSharifPatan@my.unt.edu

83% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes the connections among eight people, with nodes linked by lines representing friendships. The network uses a force-directed layout via `d3.forceSimulation`, which combines link, many-body, collision, and centering forces to arrange nodes dynamically. Nodes are rendered as green circles with labels, and edges include arrow markers to show direction. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and hovering highlights a node with a green stroke. Data comes from a local JSON file containing node and link definitions.

Ggeethanjalikotaru

83% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendship connections among eight named individuals, with nodes arranged through a force-directed layout and directed edges indicating relationship direction. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, charge, and collision forces to position overlapping nodes, while each person appears as a red circle with an ID label and arrowed lines marking connections. Interaction includes dragging nodes via `d3.drag` and hover effects that highlight a node with a green stroke. Data comes from a local JSON file containing node groups and repeated link entries, rendered as SVG elements with markers for arrowheads.

GGabriel Guimaraẽs de Almeida

83% match

Loading thumbnail…

Social Network Graph

This social network graph displays eight individuals connected through friendship links, with each node labeled by name and visualized as a green circle. The network structure is computed using `d3.forceSimulation` with force-based layout including link, charge, collision, and center forces, applied to data loaded from a JSON file. The SVG rendering includes drag-and-drop interaction via `d3.drag`, and hover effects highlight nodes by changing their stroke color. Marker arrows indicate link direction between source and target nodes.

Llikith1266

83% match

Loading thumbnail…

Social Network graph

This example visualizes a small social network of seven named individuals using a force-directed graph. Nodes represent people, with links indicating connections between them, and thicker green strokes denote stronger relationships based on weight data. The visualization loads node and link data from a local `graphFile.json` file. It uses the older `d3.layout.force` API (from d3.v2/v3, despite the d3.v4 script tag) to simulate physics, with draggable nodes, circular markers, and labels rendered as SVG elements. Styling is applied via CSS classes.

RRohith arabati

83% match