Skip to main content
SimilarExport ZIP
100%

The Network Chart

✓ Published0🌍 Public
Aavinash021997
Last edited Apr 5, 2022
Created on Apr 4, 2022
Forked from Hello HTML

This visualization shows a simple social network of seven people as a force-directed node-link diagram, where yellow links connect black circles labeled with red names. The chart uses `d3.layout.force()` to position nodes with gravity, charge, and distance parameters, and `d3.json` loads the network data from `data.json`. Nodes and links are rendered as SVG elements, with dragging enabled via `force.drag` and positional updates applied during each tick. The background is grey, and the layout runs on a 1000x600 pixel canvas.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
88% match
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
88% match
Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Ddivyagunuguntla
88% match
Loading thumbnail…

Social Network graph

A social network graph displays six people as labeled yellow circles, with orange links of varying thickness indicating connection strength between individuals. The visualization uses D3.js v4 with an SVG rendering approach, applying a force-directed layout via `d3.layout.force` to position nodes and manage collision and attraction. Links are drawn as lines with stroke widths proportional to each connection’s weight, while node labels are added as text elements. The data comes from a static JSON file containing nodes with group assignments and weighted links. Interactive dragging is enabled through `force.drag` on node groups, with positions updated on each tick event.

AAkhila-Battula
87% match
Loading thumbnail…

Social Network

The visualization displays a small social network of seven people, with weighted links indicating relationship strength. It uses a force-directed layout to position nodes, allowing users to click and drag them around the canvas. The graph is rendered as an SVG using D3.js, with brown strokes for links and silver circles with royal blue borders for nodes. Data comes from a local JSON file containing node names and link weights. The code relies on d3.layout.force() for the physics simulation, with node labels positioned to the right of each circle.

LLakshmipriya-kalapala
87% match
Loading thumbnail…

Social Network graph

A social network graph displays nine people as yellow circles with pink outlines, connected by black links whose thickness reflects a numeric weight. The layout is computed with d3.layout.force using gravity, charge, and distance parameters, while d3.json loads the graph data from an external JSON file. Nodes are draggable via force.drag, and each node includes an orange text label showing the person's name. The visualization uses SVG rendering within an 800×500 pixel canvas, with the tick handler updating link coordinates and node transforms during simulation.

Cchandrakalavanukuri
86% match
Loading thumbnail…

Network Chart

This network chart visualizes connections between named individuals using a force-directed layout. Nodes are rendered as pink circles with violet text labels, while orange links between them have stroke widths proportional to the link weight data from the local `graphFile.json`. The visualization uses the older `d3.layout.force` API (from d3 v4) with gravity, charge, and distance parameters to position the graph, and supports interactive dragging of nodes. The SVG is drawn dynamically, with each node’s position updated on every tick event.

PPavaniMangugari
86% match
Loading thumbnail…

Network Graph

This network graph visualizes social connections between seven individuals. Green nodes represent people with their names displayed, while black lines with arrowheads indicate friend relationships. The layout uses a physics-based force simulation with charge, collision, link, and centering forces, enabling interactive dragging and reorganization. Node highlighting occurs on hover, and the graph is rendered as an SVG using D3.js v6, with data loaded from a JSON file.

JJayanthKumarkoni
86% match