@gramex/treemap

1.0.0 • Public • Published

gramex-treemap

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

Example

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

Population treemap

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.

Treemap with rectangles

Source code

Color the rectangles by Country

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

Treemap with rectangles

Source code

Color the rectangles by each Group

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

Treemap with rectangles

Source code

Add labels

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

Treemap with labels

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.

Treemap with rectangles

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.

Treemap with rectangles

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.

Treemap with rectangles

Source code

Animate the shapes

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

Treemap with rectangles

Source code

Documentation

Release Notes

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

Authors

License

MIT

Package Sidebar

Install

npm i @gramex/treemap

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

96.1 kB

Total Files

5

Last publish

Collaborators

  • sanand0