Fork of Social Network graph

100%

Fork of Social Network graph

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

This example presents a social network graph of Bengaluru locations, where colored nodes represent places like Silk Board Junction and Majestic, and blue links show connections between them with stroke width proportional to link weight. It uses the D3.js v2 force layout (`d3.layout.force`) to simulate node positioning, with drag interaction enabled via `force.drag`. The SVG rendering reads node and link data from an external `data.json` file, displaying each location’s name as text alongside a circular marker. The visualization updates positions on each tick of the force simulation.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social Network

This network visualization displays a small social graph with six named nodes and five weighted links connecting them. The visualization uses a force-directed layout to position nodes, with link thickness scaled to the square root of each link's weight. The code relies on d3.v4.js and the older d3.layout.force API to calculate node positions and handle dragging. Links are rendered as orange SVG lines, while nodes appear as blue circles with purple labels taken from the data.json file.

Kkalyanikotha

83% match

Loading thumbnail…

Fork of Social Network graph

This interactive force-directed graph visualizes a small social network of nine people connected by eight weighted links, with node labels showing names and link thickness encoding connection weight. The visualization uses D3.js v4 with the legacy `d3.layout.force` API, rendering nodes as red circles with yellow strokes and black connecting lines in an SVG container. Users can click and drag individual nodes to rearrange the network, while the simulation updates positions during tick events to maintain the layout. The data comes from a local `graph.json` file with node and link arrays.

SSaiSree0122

83% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This is a force-directed social network graph built with D3 v4 and rendered as SVG. It uses `d3.layout.force` to position nine named nodes connected by eight weighted links, with stroke width proportional to link weight. Each node appears as a blue circle with a red text label, and nodes are draggable via `force.drag`. The layout applies gravity, distance, and charge settings to arrange the network, updating positions on each tick. Data comes from an external `graph.json` file.

LLakshmiManjushaReddyYarreddu

83% match

Loading thumbnail…

Fork of SOCIAL NETWORK

A force-directed network graph displays ten named nodes and nine weighted links, using red edges and blue circles with lime text. The visualization loads node and link data from a local `network.json` file, then applies a `d3.layout.force` simulation with gravity, charge, and distance parameters. SVG renders circles and lines, while node labels appear as text elements; user interaction enables drag-and-drop via `force.drag`. Link stroke widths scale by `Math.sqrt(d.weight)`, and the running simulation updates positions on each tick event.

VVineela Reddy

82% match

Loading thumbnail…

Fork of Circles with D3

A D3.js force-directed network graph visualizes connections between named locations in Bangalore, with each node representing a place and each link labeled by travel time. The graph uses `d3.forceSimulation()` with `d3.forceLink()` and `d3.forceManyBody()` to calculate node positions, while the `d3.v7` library renders the interactive layout. Node and link CSS styling distinguishes elements, and the data is hardcoded in the script, showing a static snapshot of a transportation or routing network.

Ssatishnarne99@gmail.com

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

82% match

Loading thumbnail…

Fork of Social Network graph

This is a fork of a social network graph that visualizes connections between nine named individuals using a force-directed layout. The visualization loads data from a `graph.json` file, which contains nodes grouped by category and weighted links between them, and displays it as red circles connected by black lines whose thickness corresponds to link weight. The graph uses the older `d3.layout.force` API to simulate node movement, with drag-and-drop interaction enabled via `force.drag`. The example is implemented in React and renders to SVG, with node labels shown as text next to each circle.

SSaiSree0122

82% match

Loading thumbnail…

Fork of Network Graph -1

This visualization shows a static tree graph of traffic conditions at major Bangalore locations, branching from a central root into heavy, moderate, and light traffic categories, each with two specific junction or area children. Rendered as SVG using D3 v7, it employs the `d3.tree` layout algorithm and `d3.hierarchy` to structure the hierarchical data. Nodes appear as light blue circles with labels, connected by gray horizontal links drawn using the `d3.linkHorizontal` path generator. The graph also includes a `d3.zoom` interaction that allows panning and scaling of the entire SVG view.

Rreddysushma994@gmail.com

82% match