ICE-8

100%

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

Forked from Fork of ICE8 - Social Network Graph

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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`.

HHarishma Nallala

93% 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…

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 example shows a network of nine people connected by weighted links, with each node labeled by name and grouped by color-coded circles. The visualization uses a force-directed layout to position the nodes and links dynamically. The code implements this with `d3.layout.force`, specifying gravity, distance, and charge parameters to control the simulation. Links are rendered as black lines with stroke width proportional to link weight, while nodes appear as blue circles with red text labels. The graph data comes from a local JSON file, and the SVG rendering updates positions on each tick event.

DDineshK2602

90% match

Loading thumbnail…

ICE-8 Network Graph

This example shows a small network of six people connected by weighted links, with each node labeled by name and grouped by color. The visualization uses the D3.js v4 force layout via `d3.layout.force` to position nodes and links dynamically. SVG circles and text elements render the graph, with link stroke widths proportional to the `weight` attribute from the JSON data. Node positions update on each `tick` event, and nodes support drag interactions through `force.drag`.

Llikith1266

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

90% match

Loading thumbnail…

ICE_8

This is a force-directed network graph built with D3.js that visualizes connections between seven people across four groups. Nodes are rendered as white circles with thick red borders and blue labels, while links appear as orange lines weighted by an optional numerical value. The graph reads from a JSON file containing node and link definitions, and uses the d3.layout.force API to simulate physical forces, allowing users to click and drag nodes. The SVG canvas is styled with a green background, and the implementation relies on D3 v4 and v2 libraries.

MMounishSeeni

90% match

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

90% match