Tree
Cluster Dendrogram
A cluster dendrogram of biological taxonomy data (Kingdom → Phylum → Class → Order → Family → Genus → Species) rendered using Observable Plot’s cluster mark. Unlike the tidy tree layout, the cluster layout aligns all leaf nodes to the same depth, making it ideal for comparing terminal taxa across branches. The dataset includes ~56 species across Animalia (mammals, birds, reptiles, insects, arachnids) and Plantae (flowering plants, conifers).
Interactive controls include: - A Kingdom dropdown to filter by Animalia or Plantae (or show all) - A Sort dropdown to order branches by height, alphabetically, or unsorted - A Color scheme picker (Tableau10, Category10, Dark2, Set2, Paired, Accent) - A text search input to filter species by name (e.g. typing “Lion” shows only matching paths) - A Text size slider (6–16px) to adjust label readability - A Show Dots checkbox to toggle node dot markers on/off - A species count indicator showing the number of currently visible paths
The chart dynamically adjusts its height based on the number of filtered species. The chart area is scrollable for large trees.
Indented Tree Diagram
An indented tree diagram of a project file system hierarchy rendered using Observable Plot’s tree mark with a custom indented layout. The custom treeLayout function positions each node’s y-coordinate by depth and x-coordinate by breadth-first index, creating a file-explorer-like vertical list with step-before curve connectors. The dataset contains ~70 dot-delimited paths representing a typical web project structure (src, tests, config, docs directories).
Interactive controls include: - A Folder dropdown to filter by top-level directory (src, tests, config, docs, or all folders) - A text Search input to filter paths by name substring - A Font Size slider (7–16px) to adjust label readability - A Line Width slider (0.5–4) to control connector stroke thickness - A Line Color picker to change the stroke color of tree links - A Show Dots checkbox to toggle dot marks at each node - A file count indicator showing the number of currently visible files
The chart dynamically adjusts its height based on the number of filtered paths. When no matching files are found, an empty-state message is shown. The chart area is scrollable for large trees.
Tree Tidy Layout
A hierarchical tree diagram of the Flare visualization toolkit rendered using Observable Plot’s tree mark with the Reingold–Tilford “tidy” algorithm. The chart displays ~200 nodes from the flare software hierarchy with dot-delimited paths (e.g. flare.analytics.cluster.AgglomerativeCluster).
Interactive controls include: - A Layout dropdown to switch between Tidy Tree (default Reingold–Tilford), Cluster (d3.cluster with leaf alignment), and Indented (step-before curve) layouts - A Branch filter dropdown to show only a specific top-level branch (analytics, animate, data, display, flex, physics, query, scale, util, vis) or all branches - A Link Color picker to change the stroke color of tree links - A Show Node Dots checkbox to toggle dot marks at each node - A node count indicator showing the number of filtered nodes
The chart dynamically adjusts its height based on the number of visible nodes. Hovering over nodes shows their full hierarchical path via the default title tooltip. The chart area is scrollable for large trees.