Gramex-treemap2 NPM

gramex-treemap

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

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

Install via npm:

npm install @gramex/treemap

Use locally as an ES module:

<script type="module">
  import { treemap } from "./node_modules/@gramex/treemap/index.js";
</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>

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: