documentation tree

docs/.vitepress/theme/custom.css

@@ -31,6 +31,10 @@
   z-index: 1;
 }
 
+.vp-doc .plot a:hover {
+  text-decoration: initial;
+}
+
 :root [aria-label="tip"][fill="white"],
 :root [aria-label="tip"] [fill="white"] {
   fill: var(--vp-c-bg-alt);

docs/what-is-plot.md

@@ -2,7 +2,9 @@
 
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
-import {shallowRef, onMounted} from "vue";
+import {computed, onMounted, shallowRef} from "vue";
+import {useData} from "vitepress";
+import PlotRender from "./components/PlotRender.js";
 
 const olympians = shallowRef([
   {weight: 31, height: 1.21, sex: "female"},
@@ -13,6 +15,28 @@ onMounted(() => {
   d3.csv("./data/athletes.csv", d3.autoType).then((data) => (olympians.value = data));
 });
 
+const {site: {value: {themeConfig: {sidebar}}}} = useData();
+
+const paths = computed(() => {
+  const paths = [];
+  (function visit(node, path) {
+    paths.push({path, link: node.link && `.${node.link}`});
+    if (node.items) {
+      for (const item of node.items) {
+        visit(item, (path === "/" ? path : path + "/") + item.text);
+      }
+    }
+  })({items: sidebar}, "/Plot");
+  return paths;
+});
+
+// https://github.com/observablehq/plot/issues/1703
+function computeTreeWidth(paths) {
+  const root = d3.tree().nodeSize([1, 1])(d3.stratify().path((d) => d.path)(paths));
+  const [x1, x2] = d3.extent(root, (d) => d.x);
+  return x2 - x1;
+}
+
 </script>
 
 # What is Plot?
@@ -68,3 +92,19 @@ Plot.plot({
 })
 ```
 :::
+
+## What can Plot do?
+
+Because marks are composable, and because you can extend Plot with custom marks, you can make almost anything with it — much more than the charts above! The following [tree diagram](./marks/tree.md) of the documentation gives a sense of what’s ”in the box” with Plot. Peruse our [gallery of examples](https://observablehq.com/@observablehq/plot-gallery) for more inspiration.
+
+<PlotRender :options='{
+  axis: null,
+  height: computeTreeWidth(paths) * 12,
+  marginTop: 4,
+  marginRight: 120,
+  marginBottom: 4,
+  marginLeft: 24,
+  marks: [
+    Plot.tree(paths, {path: "path", textStroke: "var(--vp-c-bg)", channels: {href: {value: "link", filter: null}}, treeSort: null})
+  ]
+}' />