ICE-8 (Social Network Graph)

100%

ICE-8 (Social Network Graph)

✓ Published1🌍 Public

Kkollirohit2000

Last edited Apr 14, 2023

Created on Apr 14, 2023

Forked from Fork of ICE-8 (Social Network Graph)

This example shows a social network graph with nine nodes representing names like Aero, MK, and Hollister, connected by curved links. Node size and color vary based on the number of connections, using the `d3.interpolateBlues` scale. The visualization uses `d3.forceSimulation` with link, charge, and centering forces to position the nodes, and renders everything as SVG elements. Links are drawn as curved paths, with green solid strokes for active connections and black dashed strokes for weaker ones. Users can drag nodes to reposition them, which the force simulation responds to in real time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 (Social Network Graph)

This example shows a social network graph with nine named people connected by curved links. Node size and fill intensity reflect each person’s degree of connectivity, based on the number of incident links. The visualization uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while a custom `tick` function draws curved SVG paths between connected individuals. Nodes are rendered as circles with labels and support dragging via `d3.drag`.

AAnjan Shrestha

92% match

Loading thumbnail…

ICE-8 (Social Network Graph)

This social network graph visualizes relationships among nine individuals, with nodes sized and colored by their connection count and curved links showing ties. The visualization uses D3 v5’s `d3.forceSimulation` for layout, with forces for centering, charge, and link distance. Node drag and drop via `d3.drag` repositions elements, while labels display names. Links are rendered as SVG paths with varying stroke styles, and node fill uses `d3.interpolateBlues` based on weight.

AAashish Pandey

91% match

Loading thumbnail…

ICE8 : Social Network graph

This example visualizes a social network as an interactive force-directed graph. Eight people are connected by friend relationships, with each node represented by a colored circle and its name label. The graph uses D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, while SVG `<line>` elements with arrow markers depict the connections. Users can drag nodes to reposition them, and hovering highlights a node with a green stroke. Data is loaded from a JSON file containing node and link arrays.

DDeeraj Thakkilapati

90% match

Loading thumbnail…

Social Network Graph --> ICE-8

This example visualizes a small social network as an interactive node-link diagram. The graph shows ten people and the friendship connections between them, with arrowheads indicating link direction. The layout is computed using D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`. Nodes are rendered as large cyan circles with text labels, and users can drag them via `d3.drag`. Data is loaded from a local JSON file, and the SVG is rendered with scaling and marker definitions from D3 v6.

SSravyaAnnadi

90% match

Loading thumbnail…

ICE8 - Social Network Graph

A social network graph displays individuals as orange circular nodes connected by blue directed links, with node labels and arrowheads indicating the direction of relationships. The visualization uses a force-directed layout via `d3.forceSimulation`, incorporating link distance, charge repulsion, collision detection, and center positioning. Nodes are rendered as SVG circles with drag interaction and hover highlighting, while links include marker-end arrows. The graph loads person-to-person friendship data from a JSON file, with all nodes initially assigned the same group value. The implementation relies on D3 v6 APIs including `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`.

AAli Shah Solanki

90% match

Loading thumbnail…

ICE8 - Social Network Graph

This example visualizes a social network graph, showing eight people (nodes) and their friendship connections (links) as red circles connected by black lines with arrowheads. The graph is rendered using SVG and D3.js v6, with node positions determined by the `d3.forceSimulation` API, including link, charge, collision, and center forces. Users can drag nodes to reposition them, and hovering highlights a node with a green border. Data comes from a JSON file specifying node IDs and relationships.

Mmosesimmanuelvemana@my.unt.edu

89% match

Loading thumbnail…

ICE-8 Social Network Graph

The ICE-8 Social Network Graph visualizes a small network of eight people connected by friend relationships, with node size and link thickness reflecting relationship strength. The graph uses a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. It renders on an SVG canvas with circles for nodes, text labels, and lines with arrow markers, all styled through external CSS. Nodes are draggable using `d3.drag`, and hovering triggers a CSS class change. The data comes from `data.json`, containing node IDs and link relationships with values.

Nnithish-1999

89% match

Loading thumbnail…

ICE8-Social Network Graph Diagram

This example shows a small social network of six people connected by seven directed relationships, rendered as an interactive node-link diagram. The visualization uses D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and lines represent people and connections. Users can drag nodes via `d3.drag` to reposition them, and hovering triggers the “nodeHover” CSS class to highlight a node. The code loads its data from a local `data.json` file, applies a single turquoise fill color to all nodes, and displays each person’s name as a text label.

Aaiswaryapalla

89% match