treemap

Author: mbostock

src/index.d.ts

@@ -32,6 +32,7 @@ export * from "./marks/rule.js";
 export * from "./marks/text.js";
 export * from "./marks/tick.js";
 export * from "./marks/tree.js";
+export * from "./marks/treemap.js";
 export * from "./marks/vector.js";
 export * from "./options.js";
 export * from "./plot.js";
@@ -50,4 +51,5 @@ export * from "./transforms/normalize.js";
 export * from "./transforms/select.js";
 export * from "./transforms/stack.js";
 export * from "./transforms/tree.js";
+export * from "./transforms/treemap.js";
 export * from "./transforms/window.js";

src/index.js

@@ -25,6 +25,7 @@ export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
 export {tree, cluster} from "./marks/tree.js";
+export {treemap} from "./marks/treemap.js";
 export {Vector, vector, vectorX, vectorY, spike} from "./marks/vector.js";
 export {valueof, column, identity} from "./options.js";
 export {filter, reverse, sort, shuffle, basic as transform, initializer} from "./transforms/basic.js";
@@ -39,6 +40,7 @@ export {window, windowX, windowY} from "./transforms/window.js";
 export {select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY} from "./transforms/select.js";
 export {stackX, stackX1, stackX2, stackY, stackY1, stackY2} from "./transforms/stack.js";
 export {treeNode, treeLink} from "./transforms/tree.js";
+export {treemapNode} from "./transforms/treemap.js";
 export {formatIsoDate, formatWeekday, formatMonth} from "./format.js";
 export {scale} from "./scales.js";
 export {legend} from "./legends.js";

src/marks/treemap.d.ts

@@ -0,0 +1,11 @@
+import {ChannelValue} from "../channel.js";
+import {Data} from "../mark.js";
+import {TreeTransformOptions} from "../transforms/tree.js";
+import {Rect, RectOptions} from "./rect.js";
+
+// TODO tree channels, e.g., "node:name" | "node:path" | "node:internal"?
+export interface TreemapOptions extends RectOptions, TreeTransformOptions {
+  value?: ChannelValue;
+}
+
+export function treemap(data?: Data, options?: TreemapOptions): Rect;

src/marks/treemap.js

@@ -0,0 +1,10 @@
+import {treemapNode} from "../transforms/treemap.js";
+import {rect} from "./rect.js";
+
+/** @jsdoc treemap */
+export function treemap(
+  data,
+  {inset = 0.5, insetTop = inset, insetRight = inset, insetBottom = inset, insetLeft = inset, ...options} = {}
+) {
+  return rect(data, treemapNode({insetTop, insetRight, insetBottom, insetLeft, ...options}));
+}

src/transforms/tree.js

@@ -146,7 +146,7 @@ const treeAnchorRight = {
   }
 };
 
-function maybeTreeSort(sort) {
+export function maybeTreeSort(sort) {
   return sort == null || typeof sort === "function"
     ? sort
     : `${sort}`.trim().toLowerCase().startsWith("node:")
@@ -162,7 +162,7 @@ function nodeData(field) {
   return (node) => node.data?.[field];
 }
 
-function normalizer(delimiter = "/") {
+export function normalizer(delimiter = "/") {
   return `${delimiter}` === "/"
     ? (P) => P // paths are already slash-separated
     : (P) => P.map(replaceAll(delimiter, "/")); // TODO string.replaceAll when supported
@@ -185,7 +185,7 @@ function isLinkValue(option) {
   return isObject(option) && typeof option.link === "function";
 }
 
-function maybeNodeValue(value) {
+export function maybeNodeValue(value) {
   if (isNodeValue(value)) return value.node;
   value = `${value}`.trim().toLowerCase();
   if (!value.startsWith("node:")) return;
@@ -278,11 +278,11 @@ function slash(path, i) {
 // These indexes match the array returned by nodeOutputs. The first two elements
 // are always the name of the output and its column value definition so that
 // the outputs can be passed directly to Object.fromEntries.
-const output_setValues = 2;
-const output_evaluate = 3;
-const output_values = 4;
+export const output_setValues = 2;
+export const output_evaluate = 3;
+export const output_values = 4;
 
-function treeOutputs(options, maybeTreeValue) {
+export function treeOutputs(options, maybeTreeValue) {
   const outputs = [];
   for (const name in options) {
     const value = options[name];

src/transforms/treemap.d.ts

@@ -0,0 +1,4 @@
+import {Transformed} from "./basic.js";
+import {TreeTransformOptions} from "./tree.js";
+
+export function treemapNode<T>(options?: T & TreeTransformOptions): Transformed<T>;

src/transforms/treemap.js

@@ -0,0 +1,70 @@
+import {stratify, treemap, treemapBinary} from "d3";
+import {column, identity, valueof} from "../options.js";
+import {basic} from "./basic.js";
+import {maybeNodeValue, maybeTreeSort, normalizer} from "./tree.js";
+import {output_evaluate, output_setValues, output_values, treeOutputs} from "./tree.js";
+
+/** @jsdoc treeNode */
+export function treemapNode(options = {}) {
+  let {
+    path = identity, // the delimited path
+    delimiter, // how the path is separated
+    frameAnchor,
+    value,
+    treeTile = treemapBinary,
+    treeSort,
+    ...remainingOptions
+  } = options;
+  treeSort = maybeTreeSort(treeSort);
+  value = value == null ? null : maybeNodeValue(value) ?? asDataValue(value);
+  const normalize = normalizer(delimiter);
+  const outputs = treeOutputs(remainingOptions, maybeNodeValue);
+  const [X1, setX1] = column();
+  const [Y1, setY1] = column();
+  const [X2, setX2] = column();
+  const [Y2, setY2] = column();
+  return {
+    x1: X1,
+    y1: Y1,
+    x2: X2,
+    y2: Y2,
+    frameAnchor,
+    ...basic(remainingOptions, (data, facets) => {
+      const P = normalize(valueof(data, path));
+      const X1 = setX1([]);
+      const Y1 = setY1([]);
+      const X2 = setX2([]);
+      const Y2 = setY2([]);
+      let treeIndex = -1;
+      const treeData = [];
+      const treeFacets = [];
+      const rootof = stratify().path((i) => P[i]);
+      const layout = treemap().tile(treeTile);
+      for (const o of outputs) o[output_values] = o[output_setValues]([]);
+      for (const facet of facets) {
+        const treeFacet = [];
+        const root = rootof(facet.filter((i) => P[i] != null)).each((node) => (node.data = data[node.data]));
+        if (value) root.sum(value);
+        else root.count();
+        if (treeSort != null) root.sort(treeSort);
+        layout(root);
+        for (const node of root.leaves()) {
+          treeFacet.push(++treeIndex);
+          treeData[treeIndex] = node.data;
+          X1[treeIndex] = node.x0;
+          Y1[treeIndex] = node.y0;
+          X2[treeIndex] = node.x1;
+          Y2[treeIndex] = node.y1;
+          for (const o of outputs) o[output_values][treeIndex] = o[output_evaluate](node);
+        }
+        treeFacets.push(treeFacet);
+      }
+      return {data: treeData, facets: treeFacets};
+    }),
+    ...Object.fromEntries(outputs)
+  };
+}
+
+function asDataValue(value) {
+  return typeof value === "function" ? value : (node) => node[value];
+}