Skip to main content
SimilarExport ZIP
100%

ICE-8_Q3_SUBHASH

✓ Published1🌍 Public
SSubhash
Last edited Nov 3, 2025
Created on Nov 3, 2025
Forked from Network

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Fork of Network

This network visualization displays relationships between movie characters, with each node color-coded and shaped by role: Hero (blue star), Villain (red triangle), Sidekick (green circle), and Mentor (orange square). The example builds a force-directed graph using `d3.forceSimulation` with link, charge, and center forces, rendering nodes as SVG paths via D3’s symbol API. Links are drawn as lines, and labels follow node positions during the simulation. Nodes are draggable using D3’s drag interaction, which restarts the simulation with a higher alpha target for responsive movement.

Cchandanamahesh0215@gmail.com
83% match
Loading thumbnail…

ICE-8_Network_Chart

This network chart visualizes relationships among seven characters, with weighted links drawn as purple lines of varying thickness. Nodes are rendered as green circles with black labels, and users can drag them to rearrange the layout. The visualization uses d3.layout.force to simulate physical forces like gravity, distance, and charge, positioning the nodes dynamically. Data comes from graphFile.json, which defines nodes and links with optional weight values. The SVG rendering is handled through D3 v4, with styles defined in CSS for the links, node circles, and text.

MMeghanaArepalli
80% match
Loading thumbnail…

ICE8.4

This visualization uses a force-directed graph to show social connections among a group of 13 people, with node size indicating relative prominence and links representing relationships such as family, marriage, and friendship. A central node anchors the network while other nodes repel each other through a many-body charge force. The code builds the layout with `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter`, then renders nodes as SVG circles and edges as SVG lines, updating their positions on each simulation tick.

BBryanA999
80% match
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
80% match
Loading thumbnail…

ICE8-Network

A force-directed network visualization maps six named team members into three functional groups—Design, Engineering, and Research—using colored nodes and labeled links to show collaboration patterns. The example uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3.drag enables interactive repositioning. Nodes render as SVG circles with a categorical color scale, and a tick handler updates link coordinates and label positions in real time.

Aaravindsg99@gmail.com
79% match
Loading thumbnail…

ICE-8 Network graph

This example shows a small force-directed network graph with five named people connected by six links, where node color encodes two groups and labels identify each person. It uses `d3.forceSimulation` with `d3.forceLink` for link distances, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep the layout centered. Nodes are rendered as SVG circles, and edges as lines, with drag behavior enabled via `d3.drag` to reposition nodes interactively. The simulation updates positions on each tick, adjusting coordinates for links, circles, and text labels.

Ppeddubalaji@gmail.com
79% 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
79% match