gramex-treemap

A re-usable visual that renders treemaps from tabular data.

Example

Given this population dataset, you can render a treemap like this:

Here is the source code for the map above

Installation

Install via npm:

npm install @gramex/treemap

Use locally as an ES module:

<script type="module">
  import { treemap } from "./node_modules/@gramex/treemap/index.ts";
</script>

Use locally as a script:

<script src="./node_modules/@gramex/treemap/treemap.min.js"></script>
<script>
  gramex.treemap(...)
</script>

Use via CDN as an ES Module:

<script type="module">
  import { treemap } from "https://cdn.jsdelivr.net/npm/@gramex/treemap@5/treemap.js";
</script>

Use via CDN as a script:

<script src="https://cdn.jsdelivr.net/npm/@gramex/treemap@5/treemap.min.js"></script>
<script>
  gramex.treemap(...)
</script>

API

The treemap() function accepts the following parameters:

• element: the SVG element to render the treemap in. This may be an <svg> or a <g> element.
• options: an object with the following keys
  • groups: a list of 1 or more column names or functions to group the treemap by
  • size: a column name or function indicating the size of the treemap
  • width: optional width of the map. Defaults to the element's size (or the nearest SVG parent)
  • height: optional width of the map. Defaults to the element's size (or the nearest SVG parent)

treemap() returns an object with these keys:

• layer(selector) a function that lets you add new lements to each treemap node. Accepts a selector of the form tag.className, e.g. rect.country

Draw rectangles

Use layer('rect.country') and style it to draw rectangles for each country.

Source code

Color the rectangles by Country

Use any d3 color scales available scaleOrdinal(schemeTableau10) and fill it for each group/country.

Source code

Color the rectangles by each Group

Use any d3 color scales available scaleOrdinal(schemeTableau10) and fill it for each group/country.

Source code

Add labels

Use layer('text') and style it to draw labels for each country.

Source code

Truncate text

Use layer('text') and style it to draw labels for each country, and truncate text by passing your custom function in place of text.

Source code

Add multiple shapes

Use layer('circle') and style it to draw circle for each country.

Use layer('div') and style it to draw div for each country.

Source code

Add tooltips

Use layer('title') and style it to draw circle for each rectangle.

Hover on rectangles in below Treemap to see tooltips.

Source code

Animate the shapes

Use .transition() on in update to animate the map

Source code

Documentation

• Home page
• Source

Release Notes

• 1.0.0: 31 Oct 2023. Initial release of @gramex/treemap

Authors

• Ullas Kakanadan [e-mail]
• Charan Pendli [e-mail]
• Shahbaz Mohd [e-mail]
• Ushasree Ginne [e-mail]
• S Anand [e-mail]

License

MIT