Skip to main content
SimilarExport ZIP
100%

Social Network Graph

✓ Published0🌍 Public
SSharankumar02
Last edited Jul 20, 2023
Created on Jul 17, 2023
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships among eight people, with green circular nodes labeled by name and connected by thick black directed edges with arrowheads. The layout uses a force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and centering forces. Nodes are draggable via D3’s drag behavior, and hovering highlights a node’s border. Data comes from a local `data.json` file containing node IDs and link relationships. The visualization is rendered as SVG using D3 v6, with all nodes sharing a single group color.

MmNamratha25
91% match
Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships among eight people, with nodes representing individuals and arrows indicating directed connections. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Rendering as SVG, the code assigns green circles, labels each node, and decorates links with arrow markers. Hovering over a node highlights it via CSS class changes, and users can drag nodes to rearrange the network, with link thickness reflecting a numeric value from the JSON data source.

SSwapna1915
91% 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
90% match
Loading thumbnail…

Social Network Graph

A social network graph visualizes friendships among eight people, with directed links labeled by relationship type and arrowheads indicating connection flow. Each node is a yellow circle with a name label, and hovering highlights the node border in blue. The visualization uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while drag interactions are enabled via `d3.drag`. Data is loaded from a local `data.json` file, and the SVG rendering applies CSS classes for hover effects and marker styling.

Hharika-1929
90% match
Loading thumbnail…

SocialNetwork Graph

A social network graph shows friendships among eight people, with arrows indicating the direction of each relationship and labels on nodes identifying each person. The visualization uses a force-directed layout via `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while `d3.drag` enables interactive movement. Data is loaded from a JSON file, and nodes are rendered as orange circles with SVG text labels; hovering highlights a node by increasing its stroke width. The code defines arrow markers in SVG `defs` and updates link positions on each simulation tick.

HHemanthh81
90% 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
90% match
Loading thumbnail…

Social Network Graph

This social network graph visualizes eight people with links representing friendships, where link thickness indicates relationship strength and all nodes share a uniform yellow fill. The visualization uses a force-directed layout powered by `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` to position nodes dynamically. Rendering occurs via SVG with draggable circle nodes, arrowhead markers on links, and hover styling that highlights the focused node in red. The data is loaded asynchronously from a JSON file containing explicit node and link definitions.

Ppavan0828
90% match