ICE - 8 Network Map

100%

ICE - 8 Network Map

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

Forked from ICE 8 part-B Trees and Networks

This interactive network map, titled "ICE - 8 Network Map," visualizes the relationships between eight individuals, where nodes are sized and colored by group and links show weighted connections. The force-directed layout, implemented with the legacy `d3.layout.force` API, applies gravity and charge to position nodes, while the SVG rendering uses circles for nodes, text labels for names, and lines for edges with stroke-width proportional to link weight. The graph loads its structure from `data.json` and allows users to click and drag nodes to explore the topology.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8

This network chart shows the relationships between eight people grouped into four clusters, with node size and link thickness indicating connection strength. The visualization uses a force-directed layout via d3.layout.force, rendering nodes as green SVG circles with labels and blue links as lines. Node positions update continuously through the force simulation’s tick event, and dragging is enabled through force.drag. The data comes from a JSON file specifying node names, group assignments, and link weights. The chart is built with vanilla d3.v4 and d3.v2 for the layout, producing a simple interactive network diagram.

Kkottenikhil

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

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

91% match

Loading thumbnail…

ICE-8 Network Graph

This network graph visualizes the friendships among eight individuals, showing the connections and relationships between them through a force-directed layout. The visualization uses D3 version 6 with the `d3.forceSimulation` API to manage the physics of node placement, incorporating forces for linking, collision detection, and centering. Nodes are rendered as circles with labels, while links are drawn as lines with arrow markers. The graph supports interactive dragging, and hovering highlights individual nodes through CSS class changes. Data is loaded from a JSON file containing link and node definitions.

Aabdhaseeeb

91% match

Loading thumbnail…

ICE-8 Network Map

This visualization displays a social network map of named individuals, rendered as an interactive force-directed graph. Nodes represent people, while weighted links indicate connections between them. The graph is implemented using the D3.js library, specifically utilizing the older `d3.layout.force` API for the physics simulation and SVG for rendering. Data is loaded asynchronously via `d3.json` from a local file, with each node styled as a white circle with a black stroke and labeled with the person's name. The force-directed layout applies gravity, distance, and charge parameters to position nodes, and the entire visualization is embedded within a React framework.

Aanushaanumula

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

90% match

Loading thumbnail…

ICE-8

A force-directed network diagram displays thirteen named individuals as colored nodes, connected by weighted links that vary in thickness based on link weight. The visualization loads node and link data from a local `graph.json` file and renders it as an SVG using D3 v2's `d3.layout.force()`, with node colors assigned from the data and drag interaction enabled via `force.drag`. Text labels appear beside each circle, and the layout updates continuously through the force tick handler.

Cchakritha06

89% match

Loading thumbnail…

ICE 8 Network Graph

This interactive network graph visualizes connections among a group of friends, with nodes representing individuals and links showing relationships. The D3.js force-directed layout uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3-force provides drag interaction. Node colors come from d3.schemeCategory10 based on group membership (1 or 2). The SVG rendering includes node labels and link thickness scaled by connection value. Users can drag nodes to explore the network, with zoom functionality via d3.zoom.

Ddivyageethanjali

89% match