ICE-8

100%

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

Forked from Social Network Graph --> ICE-8

A force-directed network graph displays 13 named nodes connected by weighted links, with each node colored and labeled from the JSON data in `graph.json`. The visualization uses `d3.layout.force()` to position nodes with a charge of -500 and distance of 160, while link stroke widths vary proportionally to the square root of each edge's weight. Node positions update on each force simulation tick, and the SVG canvas renders circles with grey strokes and text labels, with drag interaction enabled through `force.drag`.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

ICE-8(11630234)

A force-directed network diagram visualizes seven named nodes connected by weighted links, with groups indicated by node clusters. The nodes are rendered as white circles with red outlines and violet-labeled text on a light yellow background. Using d3.layout.force from D3 v4, the simulation applies gravity, charge, and distance constraints, while link thickness reflects the `weight` value from the loaded graphFile.json. Nodes are draggable, and the tick event updates line and transform attributes as positions change.

KKovvuri Supraj

90% match

Loading thumbnail…

ICE 8

This interactive network visualization displays six nodes (jack, yoru, mari, jon, sam, edam) connected by weighted links, rendered as an SVG force-directed graph. Drawn with circles, green links, and black text labels, the graph uses d3.layout.force with gravity, distance, and charge parameters to position nodes dynamically on a 750×740 canvas. Users can click and drag any node to reposition it, with link thickness reflecting edge weight. Data loads from a local graphFile.json containing node groups and link weights.

Ppreethamkesa

89% match

Loading thumbnail…

ICE-8

This visualization shows the weights of connections between nodes in a small network using a force-directed layout. It uses D3's `forceSimulation` API with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes, where link distances are proportional to the provided weight values. The nodes render as green circles with purple labels, and the links are drawn as dark lines. The dataset is hardcoded, and the code includes drag interaction through D3's `drag` method.

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

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

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

89% match

Loading thumbnail…

ICE-8 Social Network graph

A labeled node-link diagram maps nine people in the ICE-8 social network, with circle nodes positioned by a force-directed layout and links weighted by stroke thickness. The visualization uses the D3 v4 force layout (`d3.layout.force` with charge and size settings) to simulate node positions, while SVG elements render the graph, with circles, text labels, and drag interaction enabled via `force.drag`. Data comes from the bundled `graph.json` file.

Ppranatiyv

88% match