Skip to main content
SimilarExport ZIP
100%

ICE-8 Network Map

✓ Published0🌍 Public
Aanushaanumula
Last edited Jul 10, 2022
Created on Jul 9, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 - Social Network

An interactive social network visualization displays nine named individuals connected by weighted links. The graph uses D3’s `d3.layout.force` for physics-based layout, rendering nodes as rounded rectangles with gold fills and blue strokes, along with name labels. Links appear as black lines whose stroke width corresponds to each connection’s weight value. Data comes from a local `graph.json` file, and the visualization supports dragging nodes to reposition them, with the force simulation updating positions on each tick.

KKevin Raj
91% match
Loading thumbnail…

ICE-8 Social Network

This interactive network visualization maps the social connections among eight individuals, each represented by a labeled circle. The graph is built using D3.js version 7 with SVG rendering. The code defines nodes and links as data structures and applies a force-directed layout using `d3.forceSimulation`, combining `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for centering. The visualization updates dynamically, showing the network’s evolving structure as the algorithm iterates, with labels positioned relative to each node’s final coordinates.

DDan Waters
91% match
Loading thumbnail…

ICE - 8 Network Map

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.

BBaswa Sathvika Reddy
90% 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
90% match
Loading thumbnail…

ICE 8 Graph Example

This example presents a force-directed graph visualizing a social network of named individuals. The graph uses nodes and weighted links to show connections, with each person’s name displayed beside a colored circle. The visualization is built using D3 version 2’s `d3.layout.force()` API to simulate the physics of repulsion and attraction. The code loads node and link data from an external `graph.json` file, renders the network as SVG, and includes interactive dragging of nodes via `force.drag`. Node fill colors reflect per-node values from the dataset.

Aajayrao0
90% match
Loading thumbnail…

ICE-8 Social Network

This visualization displays a social network graph representing the relationships among nine individuals, with nodes connected by weighted links. The code uses d3.layout.force (the v3-style force layout) to position nodes, with link thickness based on the square root of each connection's weight. Circles and text labels are rendered as SVG elements, and users can drag nodes to rearrange the layout. A yellow tooltip appears on hover to show each person's name, while the force simulation continuously updates node and link positions.

AAbhinav-Mullapudi
90% 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
90% match
Loading thumbnail…

ICE 8 - Social Network

This interactive force-directed network diagram visualizes the relationships within a social network dataset loaded from a GitHub gist. Red circles represent individual nodes, with dashed gray lines indicating links between them, and each node is labeled with its corresponding name. The layout is computed dynamically using D3.js (v6) APIs, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to attract nodes toward the center. The SVG rendering updates node, link, and label positions at each simulation step.

DDaniel Mata
89% match