treemap

100%

✓ Published0🌍 Public

Last edited Sep 26, 2022

Created on Sep 26, 2022

This example shows a treemap visualization of population data, with three vertical columns of stacked rectangles representing different data groupings. The chart uses React to render SVG rectangles, with D3’s `scaleBand` and `scaleLinear` computing x and y positions and heights. Data comes from the United Nations World Population Prospects 2019. Mouse interactions highlight individual rectangles by adding a pink stroke via DOM event listeners. The visualization also includes a manually placed gray rectangle spanning multiple columns.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Treemap example

This treemap presents the populations of ten countries, with each rectangle’s width proportional to its population and the height divided equally. The visualization uses a bar-chart layout rather than a nested treemap, with countries listed on the y-axis and population values on the x-axis. Built with D3 v5, the code loads data from `data.csv` and draws SVG rectangles using `scaleLinear` and `scaleBand` scales, with axes rendered via `axisLeft` and `axisBottom`.

Zzjutkarma

85% match

Loading thumbnail…

Treemap Template in React

This treemap displays hierarchical data with three group leaders and fourteen employees, using color to distinguish parent categories and labels to show names and values. Built with React and D3 v5, the visualization constructs the layout using `d3.hierarchy` and `d3.treemap`, while `d3.scaleOrdinal` assigns colors. The chart renders as SVG, with React’s `.map()` method generating rectangles and text elements instead of traditional D3 joins. Data is fetched asynchronously from a remote JSON file using `d3.json` within a React hook.

Iiblub

80% match

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

80% match

Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com

77% match

Loading thumbnail…

d3 template

This example renders a treemap visualization using D3.js v6 in a React environment. It displays hierarchical data as nested rectangles, with each leaf node's area representing its value and labeled with its name. The code loads JSON data from a remote GitHub source, converts it into a hierarchy using `d3.hierarchy`, then computes the spatial layout with `d3.treemap`. The resulting SVG rectangles and text labels are appended to the chart, with leaves filled in slate blue, providing a clear visual breakdown of the data's composition.

NNita

77% match

Loading thumbnail…

Treemap Demo

This treemap demo shows a hierarchical dataset of a CEO’s employees, grouped into three boss-level parents, with each leaf rectangle sized by its numeric value. The interface includes buttons to mutate the data: changing leaf values, adding or removing child nodes, and adding or removing entire parent groups. The visualization updates with animated transitions on rectangles and text labels, rendered in SVG via React. It uses d3.hierarchy and d3.treemap for layout, d3.scaleOrdinal for color coding by parent, and d3.scaleLinear for opacity based on value.

Ggeorgeeeee

77% match

Loading thumbnail…

Untitled

This visualization displays a treemap of a hierarchical dataset with three group leaders and 14 employees. The rectangles are colored by parent group using a categorical scale and sized by leaf values, with opacity reflecting the numeric value. The code uses the D3.js hierarchy API and treemap layout to compute positions, then renders SVG rectangles and text labels, including group titles and individual data values. Data is loaded from a remote JSON file.

Pphemmati

77% match

Loading thumbnail…

TreeMap Layout

This example demonstrates a treemap layout using D3 v5, displaying hierarchical data as nested rectangles sized proportionally to their values. The visualization shows four labeled nodes—three leaf nodes (C1, C2, C3) with varying values beneath a parent node (B1), alongside a sibling node (B2)—all enclosed within root A1, with padding and gaps between groups. It uses `d3.hierarchy` to structure the data and `d3.treemap` to compute the layout, rendering rectangles and text as SVG elements. The treemap applies an outer padding of 16 pixels and scales to a 400×200 pixel area, with a static dataset defined in the code.

Ffloresh

76% match