Update CHANGELOG

Author: mbostock

CHANGELOG.md

@@ -4,7 +4,19 @@
 
 *Not yet released. These are forthcoming changes in the main branch.*
 
-The new [tree](./README.md#tree) mark and transforms can generate hierarchical node-link diagrams using D3’s “tidy” tree layout.
+The new [tree](./README.md#tree) mark and transforms can generate hierarchical node-link diagrams using D3’s [“tidy” tree](https://observablehq.com/@d3/tree) or [cluster (dendrogram)](https://observablehq.com/@d3/cluster) layout. The tree transform uses [d3.stratify](https://observablehq.com/@d3/d3-stratify) to convert tabular data into a hierarchy by parsing a slash-separated **path** for each row.
+
+<img src="./img/tree.png" width="640" alt="a node-link tree diagram representing a software hierarchy">
+
+```js
+Plot.plot({
+  axis: null,
+  inset: 10,
+  insetRight: 120,
+  height: 500,
+  marks: Plot.tree(plotsrc, {markerEnd: "arrow"})
+})
+```
 
 The [line](./README.md#line) and [area](./README.md#area) marks (specifically lineX, lineY, areaX, and areaY) now support an implicit [bin transform](./README.md#bin) with the **interval** option. This can be used to “regularize” time series data, say to show gaps or default to zero when data is missing, rather than interpolating across missing data. This is also useful for stacking time series data that is sampled at irregular intervals or with missing samples.
 

README.md

@@ -2014,7 +2014,7 @@ Equivalent to [Plot.stackX](#plotstackxstack-options), except that the **x2** ch
 
 ### Tree
 
-[<img src="./img/tree.png" width="320" height="198" alt="a node-link tree representing a software hierarchy">](https://observablehq.com/@observablehq/plot-tree)
+[<img src="./img/tree.png" width="320" height="250" alt="a node-link tree diagram representing a software hierarchy">](https://observablehq.com/@observablehq/plot-tree)
 
 [Source](./src/transforms/tree.js) · [Examples](https://observablehq.com/@observablehq/plot-tree) · Transforms a tabular dataset into a hierarchy according to the given **path** input channel, which is typically a slash-separated string; then executes a tree layout algorithm to compute **x** and **y** output channels; these channels can then be fed to other marks to construct a node-link diagram.
 

img/tree.png

@@ -2,12 +2,67 @@ 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: 1800,
-    marks: Plot.tree(flare, {markerEnd: "arrow", path: "name", delimiter: "."})
-  });
+  const plotsrc = `
+src/channel.js
+src/scales.js
+src/warnings.js
+src/format.js
+src/marks/line.js
+src/marks/cell.js
+src/marks/rect.js
+src/marks/arrow.js
+src/marks/box.js
+src/marks/tree.js
+src/marks/link.js
+src/marks/vector.js
+src/marks/dot.js
+src/marks/image.js
+src/marks/area.js
+src/marks/rule.js
+src/marks/marker.js
+src/marks/bar.js
+src/marks/tick.js
+src/marks/text.js
+src/marks/frame.js
+src/legends/swatches.js
+src/legends/ramp.js
+src/legends.js
+src/axis.js
+src/memoize.js
+src/options.js
+src/dimensions.js
+src/index.js
+src/style.js
+src/plot.js
+src/scales/quantitative.js
+src/scales/diverging.js
+src/scales/temporal.js
+src/scales/index.js
+src/scales/ordinal.js
+src/scales/schemes.js
+src/transforms/normalize.js
+src/transforms/inset.js
+src/transforms/bin.js
+src/transforms/tree.js
+src/transforms/interval.js
+src/transforms/window.js
+src/transforms/select.js
+src/transforms/identity.js
+src/transforms/basic.js
+src/transforms/map.js
+src/transforms/group.js
+src/transforms/stack.js
+src/defined.js
+src/math.js
+src/axes.js
+src/curve.js
+`.trim().split("\n").sort();
+return Plot.plot({
+  style: "padding: 1px; border: solid;",
+  axis: null,
+  inset: 10,
+  insetRight: 120,
+  height: 500,
+  marks: Plot.tree(plotsrc, {markerEnd: "arrow"})
+});
 }