Skip to main content
SimilarExport ZIP
100%

TP4 DataViz 2024

✓ Published0🌍 Public
IInès Liroulet
Last edited Jan 7, 2025
Created on Jan 7, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

Game of Thrones Interactions Web

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.

LLichtphyz
77% match
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
74% 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
74% match
Loading thumbnail…

Treemap

This treemap visualizes a hierarchical dataset of Game of Thrones characters derived from the ASOIAF_tree.json file, which contains aggregated attributes like degree, coreness, and pagerank. The rectangular layout partitions the space into nested tiles representing character subgroups, with each leaf node rendered as a solid teal rectangle. The visualization uses the D3 v5 treemap layout via d3.hierarchy and d3.treemap to compute positions and sizes based on summed values. Characters are displayed without text labels, and the SVG output shows the structural hierarchy of the network’s clustering.

Mmicyen
73% 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
70% match
Loading thumbnail…

HW2 Scatterplot

This scatterplot visualizes character network metrics from Game of Thrones, plotting page-rank against betweenness centrality for each character. Circumference encodes coreness while color represents year categories. The visualization uses Vega-Lite API with d3.v5 for data loading, rendering as an SVG with VEGA tooltips showing character names on hover.

Mmryvin
70% match
Loading thumbnail…

TP 6 DataViz

This example visualizes the co-occurrence network of characters in *Les Misérables*, using D3 v4’s force-directed simulation. Nodes represent individual characters, colored by their group, while links show relationships weighted by their value. The graph is rendered as SVG circles and lines, with node labels available via tooltips. The simulation includes charge and center forces, and nodes are draggable. The data is loaded from a local JSON file, and the tick function is present but commented out, meaning the layout is computed but node/link positions are not updated on screen—a possible bug in the example.

JJulesSauvinet
68% match