Fork of Fork of Jeevani Network

100%

Fork of Fork of Jeevani Network

✓ Published1🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

This network graph uses D3.js force simulation to visualize friendships between people, with nodes and links rendered as an SVG. The graph positions each person as a circular node labeled with their name, and connects friends with directed, arrow-headed lines. Nodes are draggable and highlight on hover. The visualization loads data from a JSON file and applies forces for link distance, charge, collision, and centering, with all nodes colored pink and text in navy.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Jeevani Network

This network graph displays the friendships among a group of named individuals, with pink circular nodes and directed black links showing connections. Using D3 v6’s force-directed layout via `d3.forceSimulation`, the visualization applies a combination of link, many-body, collision, and centering forces to position nodes. Built on an SVG canvas, the graph loads relational data from a JSON file, and nodes are interactive, supporting drag-and-drop for repositioning and mouseover highlighting through applied CSS classes.

117761A04F1

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

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

85% match

Loading thumbnail…

Fork of Fork of Fork of Social Network Graph - ICE-8

This interactive social network graph visualizes friendship connections among ten individuals, with nodes representing people and directed links showing their relationships. The D3.js v6 visualization uses a physics-based force simulation, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` forces to position nodes with 75-pixel radius circles. Users can drag nodes to explore the network, with hover effects highlighting connections. The SVG rendering displays node labels in orange text, with the data loaded from a JSON file containing relationship weights and person identifiers.

GGvl Naga Saikiran

84% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This fork of a D3.js social network graph visualizes connections between people as a force-directed network. Yellow circular nodes represent individuals, while labeled, arrowed links depict friendship relationships with varying weights. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to explore the network, and hovering highlights a node with a green outline. Data is loaded from a local JSON file and rendered as SVG elements.

NNaimisha-M

84% match

Loading thumbnail…

Fork of Fork of Social Network Graph - ICE-8

This example visualizes a social network as a node-link diagram, with ten people connected by twelve friendship links. Circles represent each person, with their name displayed as a text label, and arrows on the connecting lines indicate the direction of the relationship. The network is laid out using D3’s `forceSimulation` with link, charge, and collision forces, and users can drag nodes to explore the connections. The SVG rendering uses the `d3.js` v6 library, and the data is loaded from a JSON file containing node and link attributes like person names and relationship types.

GGvl Naga Saikiran

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

84% match

Loading thumbnail…

Fork of Social Network Visualization

This visualization shows a small social network graph with seven named friends connected by blue weighted links and green circular nodes. Each node displays a person’s name in maroon, and the graph is interactive, allowing users to drag nodes around the SVG canvas. The implementation uses D3.js v4’s `d3.layout.force` with gravity, charge, and distance parameters to position nodes, while a separate D3 v2 script is also loaded. Node and link styling are handled via CSS classes, with link thickness determined by the `weight` value from the `network.json` data source.

Kkarumanchimanasa

84% match