ICE-8 Network

100%

✓ Published0🌍 Public

AAbhiramPudi@my.unt.edu

Last edited Nov 9, 2025

Created on Nov 9, 2025

This interactive network visualization maps relationships among Greek mythological figures, using node size to represent power and color to distinguish character types such as Titans, Olympians, and Gods. The example builds the graph with d3.forceSimulation, applying forceLink, forceManyBody, and forceCenter to position nodes, and renders nodes and links as SVG elements. Draggable nodes and hover effects provide interaction, while the dataset is defined inline within the page.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 - Network Graph

This network graph visualizes relationships between eight people, with nodes representing individuals and links showing connections between them. The graph uses physics-based force-directed layout through `d3.forceSimulation`, combining forces from `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Interactive dragging is enabled via `d3.drag`, allowing users to manually reposition nodes. The SVG rendering includes arrow markers on links via the `defs` element, and node hover effects are implemented with CSS classes. Data comes from a JSON file containing node names and link relationships.

AAnanyaSamala

83% match

Loading thumbnail…

ICE8-network

This interactive network visualization displays a collaboration network among students, projects, and labs, with nodes colored by group and sized by connection weight. The graph uses force-directed layout via d3.forceSimulation with forceLink for link constraints, forceManyBody for repulsion, and forceCenter to keep the layout centered. Users can drag nodes with d3.drag to explore relationships, and hovering reveals a tooltip with node details from the CSV data sources. The SVG rendering uses d3.select and join operations to efficiently manage the dynamic graph elements.

SSai Charan

83% match

Loading thumbnail…

ICE 8 Network Graph

This example visualizes a network graph of eight named nodes connected by seven links, with two large main nodes and smaller child nodes. A force-directed layout using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` positions the nodes, while SVG circles, lines, and text labels render the structure. Node colors and sizes are assigned from a separate color module, and dragging is enabled via the D3 drag behavior.

PPrasanth Damarla

83% match

Loading thumbnail…

ICE 8 Network Graph

This example displays a small network of two main nodes and their connected child nodes, each labeled with a name and styled with distinct colors from a predefined palette. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter APIs to position the nodes, while SVG circles, lines, and text elements render the graph. Node data is generated in a separate JavaScript module, with forces applied through a tick event that updates the x and y coordinates of all elements automatically.

SSnapika

83% match

Loading thumbnail…

ICE8- Network

This interactive network visualization uses a force-directed layout to display a small social graph of ten named individuals connected by green links. Built with D3 v4, the code applies `d3.forceSimulation` with link, charge, and centering forces, rendering nodes as orange circles with black strokes and name labels using SVG. The simulation updates node and link positions on each tick, and the layout settles after the forces reach equilibrium.

KKolliTeja

83% match

Loading thumbnail…

ICE8 - Network Graph

This interactive network graph visualizes connections between eight people using D3 version 6. Nodes are rendered as pink circles with name labels, linked by blue lines with arrow markers. The layout uses `d3.forceSimulation` with link, many-body charge, collision, and centering forces to position nodes dynamically. Users can drag nodes, and hovering changes the stroke color. Data comes from a JSON file containing node names and link relationships. The SVG output updates on each simulation tick, repositioning edges and nodes based on the force-directed physics.

KKande2011

83% match

Loading thumbnail…

ICE8 - Network Graph

A network graph visualizes the relationships between eight individuals, with nodes labeled by name and connected by directed, arrowed links. The layout is determined by a force-directed simulation, using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, with nodes rendered as pink circles and blue links. Data comes from a local `networkData.json` file, and the visualization includes interactive dragging via D3's `drag` handler, with hover effects that change the node stroke to green.

Sshiiva-surya

83% match

Loading thumbnail…

ICE8_Network

A circular network layout renders five green person nodes connected by green, arrowed lines, with each node labeled with a name. The visualization uses `d3.forceSimulation` for layout, combining `forceLink` with a distance of 120, `forceManyBody` for repulsion, `forceCollide` to keep nodes separate, and `forceCenter` to center the graph. Data is loaded from `data.json` via `d3.json`. Nodes are draggable, and hovering triggers a `nodeHover` CSS class change.

MMounika0927

83% match