ICE8- Network

100%

✓ Published0🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

A force-directed network chart maps relationships between movies and actors, with blue nodes representing films and coral nodes representing people. Edges connect actors to the movies they appeared in, revealing shared cast members across productions. The graph uses D3.js force simulation with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes, while `drag` interactions let users explore the topology. The SVG rendering uses `d3.select` and `attr` to draw links, circles, and labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 8 Social Network

This example shows a force-directed social network graph of people and films, with colored nodes representing different groups and links labeled by relationship types such as "Acted in" and "Directed." The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` to position nodes, while nodes are rendered as SVG circles with text labels. Drag interactions are enabled via `d3.drag` to reposition nodes, and hover highlighting is applied through CSS classes. The data comes from a local JSON file with explicit source and target node references.

PPrasanth Damarla

86% match

Loading thumbnail…

ICE8 - Network Graph

The visualization shows a force-directed network graph of celebrity friendships, with each node representing a person and links indicating connections. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Node and link data come from `data.json`, which is loaded with `d3.json()`. Links display arrows via SVG markers, and nodes are draggable circles with white text labels. The layout is rendered in SVG with fixed dimensions of 1100 by 800 pixels.

Kkuraakhila9@gmail.com

84% match

Loading thumbnail…

network - ICE8

This example shows a force-directed network of Tom Hanks’ film connections, with nodes for actors, directors, and movies, colored by group and linked by “Acted in” or “Directed” relationships. The graph loads JSON data and runs a D3 v6 simulation using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, rendered as SVG circles and lines. Node dragging is enabled via `d3.drag`, and each link includes a marker arrow, though relationship labels are attempted on paths but not fully implemented in the final layout.

SSaivignesh-9176

84% match

Loading thumbnail…

Fork of ICE-8_Q3_SUBHASH

This network visualization maps relationships between movie characters, with each character represented as a node and connections as links. Node color and shape encode role: blue stars for heroes, red triangles for villains, green circles for sidekicks, and orange squares for mentors. The animation relies on d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute layout, while d3.symbol applies the shape types. Labels are positioned manually, and the d3.drag interaction lets users reposition nodes. The dataset is hardcoded in the script, with force simulation ticks updating SVG line and path positions.

SSubhash

82% match

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

82% match

Loading thumbnail…

ICE-8_Q3_SUBHASH

This network visualizes relationships between six movie characters, using color and shape to encode each character’s role (Hero, Villain, Sidekick, Mentor). The layout is computed by D3’s `forceSimulation`, combining `forceLink` for edges, `forceManyBody` for repulsion, and `forceCenter` for anchoring. Nodes are rendered as SVG paths with distinct D3 symbols (`symbolStar`, `symbolTriangle`, `symbolCircle`, `symbolSquare`), and lines represent character connections. The simulation updates node and link positions dynamically, and supports interactive dragging.

SSubhash

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

82% match

Loading thumbnail…

ICE8 Network Graph

This interactive network graph visualizes friendships among a group of ten people, with nodes representing individuals and edges denoting "Friend with" relationships. The visualization uses D3’s `forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes, rendering them as sky-blue circles with labels in an SVG. Users can drag nodes to rearrange the network, and hovering highlights a node with a thicker stroke, as implemented via `d3.drag` and CSS class toggling.

EEshwarreddyt

81% match