Fork of ICE 8 Network Graph

100%

Fork of ICE 8 Network Graph

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This example shows a network graph of family relationships, with a central parent node connected to child nodes and further sub-nodes. The visualization uses D3.js force simulation to position the nodes and links, rendered as SVG circles and lines. The code applies `d3.forceSimulation` with `forceManyBody` for repulsion, `forceLink` for connections, and `forceCenter` to anchor the layout. Node colors and sizes are defined in a separate `colors.js` module, and the data structure is built programmatically in `data.js`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of ICE-8 : Network Tree

This example displays a small family-style network as a force-directed tree, with nine labeled nodes connected by curved, red or black links whose style varies according to link weight. Node radius and blue fill intensity reflect the number of connections per node. Built with D3 v5, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position nodes, while SVG paths and circles render the graph. Users can drag nodes to reposition them, and the simulation updates continuously via tick events.

JJyothicherukuri

90% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a social network as a force-directed graph, with red circular nodes representing individuals and black lines indicating connections such as “family with” or “friend with” relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Dragging is enabled via `d3.drag`, and hovering highlights nodes using a CSS class. Data is loaded from a JSON file, and the graph is rendered as SVG elements (`<circle>`, `<line>`, `<text>`), with marker arrows defined in `<defs>`.

PPriyanka7002

88% match

Loading thumbnail…

Fork of Fork of ICE 8: Tree and Network

This visualization displays a hierarchical tree of family relationships using D3’s stratify and tree layout functions, with nodes represented as blue-styled circles and red connecting paths. The SVG animation runs on page load, transitioning link paths from a collapsed state to their full positions, expanding circles with a duration of 800 milliseconds, and revealing text labels sequentially based on node depth using D3 transitions with custom durations. The data is hardcoded as an array of child-parent pairs, with some empty and incomplete entries, and the rendering uses D3 v6 within a React environment, outputting to SVG with generated circles, paths, and text elements.

AArv1228

86% 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

86% match

Loading thumbnail…

Fork of ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, with nodes representing individuals and links showing parent-child relationships. Rectangular nodes with names animate into position, and connecting paths draw from parent to child. The visualization is rendered as SVG using D3 v6, employing `d3.stratify()` to structure the flat data and `d3.tree()` to compute positions. Transitions animate the paths and text, with staggered delays based on node depth.

Bbhargavarathod

86% match

Loading thumbnail…

Fork of Fork of Social Network Graph ICE-8

This example shows a social network graph using a force-directed layout. A small set of person nodes are connected by directed links that represent friendships, with link thickness varying by edge value. The user can drag nodes to reposition them. The visualization is rendered with SVG and built using D3 v6, specifically `d3.forceSimulation` with link, charge, collision, and center forces, alongside `d3.drag` for interactivity. Node labels and link arrow markers are included, and data is loaded from an external JSON file.

Ssnehareddygurram

86% match

Loading thumbnail…

Fork of ICE 8 - Social Network

This visualization displays a social network as a force-directed graph, with red circular nodes representing individuals and dashed gray lines showing connections between them. Each node is labeled with the person’s name using SVG text elements. The code uses D3 v6’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. Data is loaded from a remote JSON file via `d3.json`, and all rendering occurs in SVG.

RRamakanth771

86% match

Loading thumbnail…

Fork of Data visualization ICE-8 Social network

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

Vvamshisoletii

86% match