Skip to main content
SimilarExport ZIP
100%

network

✓ Published0🌍 Public
Sshreelasya.bezawada@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from ICE-8 2q network

A force-directed network graph maps family relationships from a CSV dataset, with nodes representing individuals and links showing connections. Node colors encode generation depth, computed via breadth-first search from root nodes, and labels identify each person. Dragging nodes repositions the simulation, while hovering reveals additional details in a tooltip. The visualization uses d3.forceSimulation for layout, d3.drag for interaction, and SVG rendering with D3 v7.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

NETWORK

A network visualization maps relationships between tree families and species, with color encoding hierarchy levels (root, family, species) and node size representing average height. The force-directed layout uses d3.forceSimulation with link, charge, center, and collide forces to position nodes, while SVG rendering draws links and draggable nodes. Hovering a species displays a tooltip with details, and the dataset loads from an external CSV file via a custom parsing function that handles both regular and single-line formats. D3 v7 powers the interactive simulation, styling, and event handling throughout.

Llohitsai62@gmail.com
88% match
Loading thumbnail…

Social Network graphic

This social network graphic visualizes family relationships using a force-directed layout, with nodes representing individuals and links showing connections weighted by line thickness. The red circular nodes display names and support dragging, while blue links scale their stroke width based on relationship weight. Built with d3.v4 and the legacy d3.layout.force API, the visualization loads data from family.json and renders everything as SVG. The simulation applies gravity, charge, and distance parameters to position nodes dynamically.

Ssumanthsomu1
84% match
Loading thumbnail…

Network

A social network graph displays six people grouped by category—Family, Friends, or Work—with colored nodes and labeled connections. The visualization uses a D3 force-directed layout via `d3.forceSimulation`, `forceLink`, and `forceManyBody` to position nodes and links dynamically. Node colors are mapped with a `d3.scaleOrdinal` against a hardcoded dataset of names and relationships. Interactions are minimal, with the simulation updating SVG circle and line positions on each tick.

KKOLLIPATI NIKHIL
83% match
Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Iindushashi.g@gmail.com
83% match
Loading thumbnail…

Network

A force-directed network graph displays nodes and directed links, colored by categorical group and relationship type. Redundant labels and relationships are deduplicated from the input. Users can click a node to view its ID or double-click to filter the graph to that node's subgraph. The visualization uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter, and d3.drag, rendering data from data.json with SVG.

Aala-wahibi
83% match
Loading thumbnail…

Fork of ICE-8 NETWORK

This example presents a family relationships network as an interactive force-directed graph. It shows individuals as draggable nodes and parent–child connections as links, with node color indicating generation depth. The visualization uses D3 v7’s `d3.forceSimulation` with link, charge, center, and collide forces, and loads CSV data from a GitHub Gist to build the hierarchy via `d3.stratify`. SVG rendering displays nodes, links, and labels, with a hover tooltip for additional information.

Sskmriyaz0786@gmail.com
83% match
Loading thumbnail…

Family Network graph

This example visualizes a family network as a force-directed graph, with eight named nodes connected by weighted links that represent relationships. The code uses D3 v4’s `d3.layout.force` to compute node positions and render the structure as an SVG, drawing red links with stroke widths proportional to each link’s `weight` value. Node labels appear in orange text with blue circles, and interactive dragging is enabled via `force.drag`. Data is loaded from an external `data.json` file, which defines the nodes and their connection weights.

DDINESH SAI BOPPANA
83% match
Loading thumbnail…

Family Network graph

This example shows a family network graph, visualizing eight individuals as labeled nodes and their relationships as weighted links. The force-directed layout uses `d3.layout.force` from D3 v4 to position nodes and edges, with link thickness proportional to a weight value. Red links and orange text labels render in SVG, while node circles are filled blue. The data comes from a static JSON file, and the graph is interactive through `force.drag` for node repositioning.

DDINESH SAI BOPPANA
83% match