Downing 5320 ice8 2.3

100%

Downing 5320 ice8 2.3

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example visualizes a social network of characters from *The Lord of the Rings* as an interactive force-directed graph. Nodes represent characters, colored red and labeled with names, while directed links show "Friend with" relationships derived from a local `data.json` file. Users can drag nodes to reposition them, with hover effects highlighting selected nodes. The visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to compute the animated layout, with SVG markers for arrowheads and drag handlers enabling interaction.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lord of the Rings Interactions Web

This interactive force-directed graph visualizes character co-occurrence in *The Lord of the Rings* trilogy, showing which characters appear together in the text. Node color encodes group membership, while link thickness indicates the frequency of interactions. The layout uses d3.forceSimulation with link, charge, and center forces, and the graph is rendered as SVG. Data comes from LotR_interactions.json, with links filtered to show only interactions of 55 or more occurrences within a three-sentence window.

LLichtphyz

80% match

Loading thumbnail…

Fork of Data visualization ICE-8 Social network

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

Vvamshisoletii

79% match

Loading thumbnail…

ICE_8_Social_Network_Graph

This example shows a small social network graph of people and their friendships, with nodes labeled by name and linked by green directed edges that use arrow markers. A force-directed layout, built with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, positions the nodes, while drag interactions and hover highlighting are supported via D3’s `drag` and CSS classes. The code loads `data.json` specifying nodes and links, renders SVG circles and text, and uses D3 v6 through an ES module import.

RRamch16

77% match

Loading thumbnail…

ICE-8 Social Network Tree

This example visualizes a social network as a force-directed tree, showing ten people connected by "Friend with" relationships from the data.json file. Large light green circular nodes, labeled with names, are positioned through d3.forceSimulation, d3.forceLink, and d3.forceManyBody, with collision detection via d3.forceCollide. Blue lines with arrowheads, defined using SVG markers, indicate the direction of each friendship, and users can drag nodes to rearrange the network. Hovering over a node highlights it with a red stroke, achieved through CSS class toggling.

TTharun Reddy

77% match

Loading thumbnail…

Social Network Graph ICE-8

This example shows a social network graph with nodes representing people and links indicating friendships. The visualization uses a force-directed layout powered by `d3.forceSimulation`, with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to arrange nodes and edges. SVG circles and text labels render the nodes, while lines with arrow markers depict relationships. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and nodes highlight on hover. Data is loaded from a local `data.json` file, and the code uses D3 v6 within a React framework.

TTharun2022

77% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a force-directed graph, showing friendships between ten people with labeled nodes and directional links. The layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, while nodes are rendered as large cyan circles with SVG text labels. Links are drawn as lines with arrow markers to indicate direction, and nodes are draggable via D3’s drag behavior, with a hover effect that thickens the node border. The code loads data from a JSON file and uses SVG for all rendering.

Rradhadevarapu

77% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network as a force-directed graph, showing eight people as red circular nodes and their “Friend with” relationships as directed, arrow-headed lines. Node labels display each person’s name. The layout is computed with d3.forceSimulation, combining d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter to manage link distances, repulsion, collision, and centering. Users can drag nodes via d3.drag, and hovering triggers a focusNode/ blurNode interaction that changes the node stroke to green. Data is loaded from a JSON file using d3.json.

MM.Saleh Tibi

77% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This visualization shows a social network graph of ten individuals connected by friendship links. Each node is rendered as a circle with a person’s name, and directional arrows on the connecting lines indicate the relationship’s source and target. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and a center force. Nodes are draggable via `d3.drag`, with hover effects toggling a CSS class. Data comes from a local `data.json` file, and the SVG is rendered with D3 v6.

Bbhanuprasadk19

77% match