Treemap

100%

✓ Published0🌍 Public

Last edited Feb 7, 2023

Created on Feb 7, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

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

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

73% match

Loading thumbnail…

Treemap Example

This treemap visualizes the hierarchical flare dataset, showing relative leaf-node values as nested rectangles colored by their top-level parent category. Built with D3 v6 and rendered as SVG, the example implements a custom treemap layout algorithm via recursive space partitioning that alternates between horizontal and vertical splits. The code uses d3.scaleLinear for proportional sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and calculates text visibility based on rectangle dimensions. Data is loaded from a JSON file and displayed with interactive hover effects absent, focusing purely on static hierarchical encoding.

HhelloHailey-sketch

71% match

Loading thumbnail…

Fork of Treemap

This visualization shows a hierarchical treemap where rectangular tiles represent data categories, with size indicating their relative production values. The treemap displays five groups (grp1–grp7) nested under an origin node, each filled with a uniform teal color and labeled with white text. Built with D3 v6, the code uses `d3.stratify` to convert CSV data into a hierarchy, `d3.treemap` to compute tile positions, and SVG `rect` and `text` elements for rendering.

GGayan Priyadarshana

71% match

Loading thumbnail…

Treemap layout (with labels)

A treemap layout visualizes a small hierarchical dataset, with nested rectangles representing the root node A1, its children B1 and B2, and the grandchildren C1, C2, and C3. Each rectangle is colored cadetblue, and labels show the node names. The example uses the `d3.treemap` layout with `d3.hierarchy` and `rootNode.sum` to compute sizes, then renders the result as SVG rectangles and text elements via data joins on `g` nodes.

Yyuva24

70% 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 Treemap

This example shows a hierarchical treemap visualization where nested rectangles represent data values, with each rectangle’s area proportional to its value and text labels displaying the numeric data. The layout is generated using D3 v5’s `treemap` and `hierarchy` functions, which compute rectangle positions and sizes from a nested data structure. The SVG rendering applies a semi-transparent royal blue fill with white strokes to the rectangles, while white Helvetica text labels each node. The treemap layout is configured with a 900 by 400 pixel size and a 16-pixel outer padding, and the root’s values are summed using the `sum` method.

Mmryvin

70% match