Skip to main content
SimilarExport ZIP
100%

Game of Thrones Interactions Web

✓ Published0🌍 Public
LLichtphyz
Last edited Sep 5, 2017
Created on Aug 17, 2017

A force-directed network graph maps character co-occurrence in *Game of Thrones*, with line thickness proportional to interaction frequency above a threshold of 55. Node colors represent character groups, and labels identify each figure. Built with D3 v4, the visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines render the network. Data comes from the included `GoT_interactions_draft.json` file.

AI-generated description

This simple force-directed graph shows character co-occurence in * A Song of Ice and Fire (a.k.a. Game of Thrones) by George R. R. Martin*.

Only character pairs with greater than 55 interactions are show. Line wieghts are directly proportion to the number of interactions between each character.

A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by [Tim Dwyer].

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4062045'>Force-Directed Graph</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/a2a7b2a3f6911b2e7dc1176e7c8f751f'>Game of Thrones Interactions</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fork of Network

This network visualization maps relationships among six Game of Thrones characters, with links representing interactions and line thickness encoding connection strength. Nodes are colored by house affiliation using a categorical color scale. The code creates a force-directed graph using `d3.forceSimulation` with link distance, charge repulsion, and centering forces. SVG circles and text labels render the nodes, while `d3.drag` enables interactive repositioning. Link stroke widths map relationship values through `d3.scaleLinear`, and the layout updates continuously via the simulation's tick event.

Ssrinathkarumuru@my.unt.edu
84% match
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
78% match
Loading thumbnail…

TP4 DataViz 2024

This visualization shows a social network from the Game of Thrones universe as an adjacency matrix. Each row and column represents a character, with cell color indicating shared group membership and opacity reflecting the strength of the connection between two characters. The matrix is built using `d3.json` to load the data and `d3.scaleBand` for positioning. A dropdown menu allows users to reorder the matrix based on appearance, zone, or influence, with the layout updating accordingly. The visualization is rendered as SVG with animated transitions, using D3 v7.

IInès Liroulet
77% match
Loading thumbnail…

Game of Thrones Co-occurrence

This matrix diagram visualizes character co-occurrences in the "A Song of Ice and Fire" series, with each colored cell representing two characters appearing within a sentence of each other and darker cells indicating more frequent co-occurrence. The visualization uses d3.js (v2) with SVG rendering, employing d3.scale.ordinal for the matrix layout, d3.scale.category10 for coloring by cluster group, and animated transitions via d3.transition to reorder the matrix by name, frequency, or cluster. The data comes from a JSON file containing 43 nodes (characters) and their weighted co-occurrence links.

LLichtphyz
76% match
Loading thumbnail…

How to D3 Force Directed Layout Graph

This example demonstrates a simple force-directed network graph with three nodes connected by three links, using Game of Thrones houses as node labels. The visualization renders circles and lines in SVG and relies on `d3.forceSimulation` to compute the layout, with `linkDistance(300)` set to space the nodes apart. Node positions update on each tick event, while `force.drag` enables interactive dragging. The code builds nodes and links from a hardcoded array of source-target pairs, stored as plain JavaScript objects, and styles the elements via CSS classes.

Iisaachowen
75% match
Loading thumbnail…

Herodotus Interactions Web

This example shows a force-directed graph of proper-noun co-occurrences in Herodotus’s Histories, with nodes representing people, places, and groups, and link thickness proportional to interaction frequency. Only pairs with more than 25 interactions appear. The layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while nodes are colored by assigned groups via `d3.scaleOrdinal`. Data comes from a JSON file, rendered as SVG circles and lines with drag support.

LLichtphyz
75% match
Loading thumbnail…

Fork of d3 adjacency matrix (soc dataset)

An interactive adjacency matrix built with D3 v6 visualizes character relationships from the Game of Thrones dataset. The SVG rendering displays ten cells in a 5x5 grid, where filled teal squares indicate interactions between pairs of characters. D3 selections bind data to rows and columns using `selectAll` and `enter()`, while `append('rect')` and `append('text')` generate the matrix cells and labels. The title, row, and column annotations use CSS for styling. The simplified network dataset from networkrepository.com appears as an undirected graph, with matrix rows and columns symmetrically mirrored to reflect bidirectional relationships.

AAurélien
75% match
Loading thumbnail…

Game of Thrones Narrative Chart

This narrative chart visualizes character appearances and affiliations across the scenes of a story, using the d3.layout.narrative API to arrange scenes and characters. The data, sourced from a JSON file containing the character list and scene breakdowns, is processed by the `wrangle` function before layout. The rendering uses an SVG canvas, with colored paths for character links and styled text labels, all constructed via d3.v3.

LLichtphyz
74% match