Skip to main content
SimilarExport ZIP
100%

Treemap example

✓ Published0🌍 Public
Zzjutkarma
Last edited Mar 23, 2022
Created on Mar 23, 2022
Forked from bar chart 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`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

treemap

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.

RRenato Magalhães
85% match
Loading thumbnail…

Let's make a bar chart with D3.js

This bar chart displays the populations of ten countries, with bars extending horizontally from a left-aligned axis. The visualization uses D3.js v5 within a React framework to load CSV data and render SVG elements, employing `d3.scaleLinear` and `d3.scaleBand` for proportional scaling. It generates left and bottom axes via `d3.axisLeft` and `d3.axisBottom`, and appends rectangles through a data join to encode population values.

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

Bar chart

This bar chart displays the populations of ten countries in 2020, sorted by country name. Using React and D3 v5, it renders SVG rectangles via a scaleBand for the categorical y-axis and a scaleLinear for the numerical x-axis. The data loads from a CSV via d3.csv. Axes are custom components, and hover tooltips use native SVG `<title>` elements with formatted population values.

TTakuya Kitazawa
80% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries, with horizontal bars sorted by descending population. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering as SVG. Population data from `data.csv` is loaded via D3’s `csv` parser, with values multiplied by 1,000. Axes are added using `axisLeft` and `axisBottom`, and bars are appended as `rect` elements with a steelblue fill.

DDaniel Rivera
80% match
Loading thumbnail…

Bar Chart

This example displays population data for ten countries as a bar chart, with each country’s value encoded by the height of a rectangle. The chart is rendered as an SVG using D3 v5, with data loaded from a CSV file via `d3.csv`. The code uses `d3.select`, `d3.scaleLinear`, and `d3.max` to set up the visualization, while `d3.enter` appends the rectangles. The bars are currently fixed at 300 by 300 pixels, and the population values are multiplied by 1000 before rendering, though the axis and scaling are incomplete.

Jjeffazzo
80% match
Loading thumbnail…

Bar Chart with React & D3

This bar chart displays the populations of ten countries, using a horizontal bar layout with a linear x-axis and categorical y-axis. It is built with React and D3, where D3’s `scaleBand` and `scaleLinear` handle positioning, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG elements for axes and bars. The data is loaded from a CSV via `d3.csv`, with population values scaled and formatted using `d3.format`. Tooltips and styled tick lines provide additional detail.

SStefano Renzetti
80% match
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of ten countries, with each bar’s length representing population in thousands. The example demonstrates a basic D3 v5 workflow within a React framework, using SVG rendering. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to generate the axes, with data loaded from a CSV file.

Ddivinebooger
80% match