Skip to main content
SimilarExport ZIP
100%

Fork of ICE-8

✓ Published0🌍 Public
MM
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from ICE-8

A force-directed network graph visualizes the "weights of nodes" in an animal network. The visualization uses a CSV of animal pairs to define the links and nodes, with the simulation driven by `d3.forceSimulation` applying link, many-body, collision, and center forces. The graph is rendered as an SVG, with pink circular nodes and red strokes; node labels are purple. The `d3.drag` API enables interactive node dragging, while a green page background and a custom marker definition for arrowheads are also applied.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8

This visualization shows the weights of connections between nodes in a small network using a force-directed layout. It uses D3's `forceSimulation` API with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes, where link distances are proportional to the provided weight values. The nodes render as green circles with purple labels, and the links are drawn as dark lines. The dataset is hardcoded, and the code includes drag interaction through D3's `drag` method.

MM
85% match
Loading thumbnail…

Fork of ICE-8 - Network - Nghia Dang

A force-directed network diagram visualizes 13 nodes grouped by color (using a categorical scale) and linked by weighted edges, with node positions determined by a physics simulation. The SVG rendering uses d3.v5 and the `d3.forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.scaleOrdinal` assigns colors based on group membership. Data is loaded from `data.json`, and link stroke widths encode the `value` attribute, with all elements updated on each simulation tick.

AArefa Patwary
85% match
Loading thumbnail…

Fork of ICE8-network

This collaborative network visualization uses a force-directed layout to show relationships between students, projects, and a lab. D3’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` position colored nodes by group, while link thickness encodes connection value. The SVG rendering includes draggable nodes via `d3.drag()` and hover tooltips that display each node’s name and group. Data loads from two CSV files, with node color mapped by a `d3.scaleOrdinal`.

Ssaiprasadpilla937@gmail.com
85% 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
84% match
Loading thumbnail…

Fork of Fork of ICE-8 (Network)

A force-directed network graph visualizes a small study group of seven people, with nodes representing members and links showing their connections. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG rendering draws lines and circles with `d3.schemeTableau10` colors. Node dragging via `d3.drag` allows interactive repositioning. The accompanying `data.csv` file—though not directly loaded in the code—lists country codes and values, suggesting a separate dataset unrelated to the in-script node/link arrays. The dark-themed interface renders entirely client-side using D3 v7.

LLokesh
84% match
Loading thumbnail…

Fork of Social Network Graph --> ICE-8

The visualization displays a social network graph where orange circular nodes represent entities like "Pet Controller" and "Owner," connected by red, arrowed lines. It uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive movement. The SVG renders from `data.json`, with nodes labeled via `text` and links styled with `marker-end` arrows, highlighted on hover using CSS classes.

GGvl Naga Saikiran
84% match
Loading thumbnail…

ICE-8Network graph

This network graph visualizes connections between nodes loaded from a CSV file, with each node represented as a pink circle labeled by its initial. Using d3.forceSimulation, the graph applies link, many-body, collision, and center forces to arrange nodes dynamically while links are drawn as black lines with arrow markers. Interactive dragging is enabled through d3.drag, and hovering highlights nodes with a thick black stroke. The SVG rendering uses a green background, and node positions update continuously during the simulation tick.

MM
84% match
Loading thumbnail…

Fork of 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.

TTekmal-Bhavana
84% match