Fork of ICE-8

100%

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

Forked from ICE-8

A force-directed graph displays nine named nodes, for example "Shashank" and "Divya," connected by weighted lines from a hard-coded JSON dataset. The visualization uses d3.v4 along with an older d3.v2 fallback. Circles and red text labels are manually styled with SVG attributes, while a custom `d3.layout.force()` applies gravity, distance, and charge parameters to position the nodes. Nodes are draggable, and their links update on each tick event.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8

This force-directed network chart visualizes a small graph of seven people grouped into four clusters, with links weighted by connection strength. The visualization uses D3 v4’s `d3.layout.force` to position nodes and render SVG lines for links and circles with labels for each person. Nodes are draggable via the force layout’s drag behavior, and tick updates synchronize link coordinates and node transforms. Data comes from a local JSON file containing node names, group assignments, and link weights, which also drive stroke thickness via `Math.sqrt(d.weight)`. The page uses a red background and white link strokes for contrast.

Aajaysonu

87% match

Loading thumbnail…

Fork of ICE8 network graph

This example visualizes a small directed network graph with seven nodes and six weighted links, using labeled circles to represent entities and lines to show connections. The graph is rendered as SVG and positioned through a force-directed layout, with link stroke widths reflecting each connection’s weight. It relies on the older `d3.layout.force` API from d3.v2 (loaded alongside d3.v4) to simulate physics, while node dragging is enabled via `force.drag`. The data comes from an embedded `graphFile.json` file, and styling uses CSS.

Ssaijahnaviappineni

87% match

Loading thumbnail…

Fork of ICE-8_Network_Chart

This example shows a small network of seven named nodes connected by six links, with node groups and link weights visible through circle styling and stroke width. It uses a force-directed layout via `d3.layout.force` to position nodes, with SVG rendering for lines, circles, and text labels. The code loads node and link data from a JSON file and supports dragging nodes through `force.drag`. Styling is applied with CSS, and the visualization updates on each tick of the force simulation.

SSreekarveeravelly

86% match

Loading thumbnail…

Fork of ICE-8: Social Network

This visualization shows a small social network of six people, with colored circles representing individuals and orange lines linking them. A force-directed layout, created using `d3.layout.force` from the v2/v3 API, positions the nodes and edges. Node labels are appended as SVG text, while link thickness reflects each connection’s weight value from the JSON data. The graph is rendered as an SVG element, and nodes are draggable via `force.drag`, with positioning updated on each tick event.

Ssaivinay143

85% match

Loading thumbnail…

ICE-8

A force-directed network graph displays 13 named nodes connected by weighted links, with each node colored and labeled from the JSON data in `graph.json`. The visualization uses `d3.layout.force()` to position nodes with a charge of -500 and distance of 160, while link stroke widths vary proportionally to the square root of each edge's weight. Node positions update on each force simulation tick, and the SVG canvas renders circles with grey strokes and text labels, with drag interaction enabled through `force.drag`.

HHarishma Nallala

85% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph visualizes friend connections among eight people, with nodes labeled by name and directed, arrow-tipped links indicating relationships. The force-directed layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node with a green stroke. The SVG output is rendered with D3 v6, using data from a JSON file.

RRahulChaitu999

85% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This network graph visualizes a personal social network, showing relationships between eight individuals as red, arrowed links connecting large, light-blue circular nodes. Node labels are displayed within each circle. The graph is constructed using a `d3.forceSimulation` engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to determine node positions, and nodes are rendered as SVG circles. The visualization is interactive, allowing users to drag nodes, with hover effects highlighting the selected circle.

Bbhargavarathod

84% match

Loading thumbnail…

Fork of ICE-8 Social Network Graph

This fork of ICE-8 renders a social network as a force-directed graph in SVG. It shows ten named nodes connected by green links, with edge thickness proportional to each link's weight. The visualization uses the D3 v2 `d3.layout.force` API for simulation and dragging, and loads node and link data from an external `network.json` file. Node circles and labels are colored via CSS classes, while link positions update on each simulation tick.

Ffouzanuddin

84% match