flareCluster, flareIndent

Author: mbostock

src/transforms/tree.js

@@ -25,9 +25,10 @@ export function treeNode({
     transform(data, facets) {
       const P = normalize(valueof(data, path));
       const root = stratify().path((i) => P[i])(range(data));
-      const layout = treeLayout().nodeSize([1, 1]);
       if (treeSort != null) root.sort(treeSort);
-      if (treeSeparation !== undefined) layout.separation(treeSeparation ?? one);
+      const layout = treeLayout();
+      if (layout.nodeSize) layout.nodeSize([1, 1]);
+      if (layout.separation && treeSeparation !== undefined) layout.separation(treeSeparation ?? one);
       layout(root);
       const X = setX([]);
       const Y = setY([]);
@@ -75,9 +76,10 @@ export function treeLink({
     transform(data, facets) {
       const P = normalize(valueof(data, path));
       const root = stratify().path(i => P[i])(range(data));
-      const layout = treeLayout().nodeSize([1, 1]);
       if (treeSort != null) root.sort(treeSort);
-      if (treeSeparation !== undefined) layout.separation(treeSeparation ?? one);
+      const layout = treeLayout();
+      if (layout.nodeSize) layout.nodeSize([1, 1]);
+      if (layout.separation && treeSeparation !== undefined) layout.separation(treeSeparation ?? one);
       layout(root);
       const X1 = setX1([]);
       const X2 = setX2([]);

test/plots/flare-cluster.js

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const flare = await d3.csv("data/flare.csv", d3.autoType);
+  return Plot.plot({
+    axis: null,
+    inset: 10,
+    insetRight: 120,
+    height: 2400,
+    marks: Plot.cluster(flare, {path: "name", delimiter: "."})
+  });
+}

test/plots/flare-indent.js

@@ -0,0 +1,33 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function () {
+  const flare = await d3.csv("data/flare.csv", d3.autoType);
+  return Plot.plot({
+    axis: null,
+    inset: 10,
+    insetRight: 120,
+    round: true,
+    width: 200,
+    height: 3600,
+    marks: Plot.tree(flare, {
+      strokeWidth: 1,
+      strokeOpacity: 1,
+      r: 2.5,
+      curve: "step-before",
+      treeLayout: indent,
+      path: "name",
+      delimiter: "."
+    })
+  });
+}
+
+function indent() {
+  return (root) => {
+    let i = 0;
+    root.eachBefore((node) => {
+      node.y = node.depth;
+      node.x = ++i;
+    });
+  };
+}

test/plots/index.js

@@ -53,6 +53,8 @@ export {default as energyProduction} from "./energy-production.js";
 export {default as figcaption} from "./figcaption.js";
 export {default as figcaptionHtml} from "./figcaption-html.js";
 export {default as firstLadies} from "./first-ladies.js";
+export {default as flareCluster} from "./flare-cluster.js";
+export {default as flareIndent} from "./flare-indent.js";
 export {default as flareTree} from "./flare-tree.js";
 export {default as footballCoverage} from "./football-coverage.js";
 export {default as fruitSales} from "./fruit-sales.js";