mirror of
https://github.com/d3/d3.git
synced 2026-02-01 16:41:44 +00:00
6d6c6792f1
* checkpoint vitepress docs * edits * edits * hero drop shadow * d3-array edits * resolve d3 * split d3-array * move d3-array stuff around * d3-array is collapsed: true * italicize parameter names * searching edits * update dependencies * d3-array edits * array edits * array edits * array edits * array edits * array edits * move files * array edits * array edits * array edits * getting started edits * modules page * array edits * more structure * live example * dsv edits * fetch edits * dsv edits * random edits * time format edits * time edits * time edits * modules edits * color edits * color edits * interpolate edits * scale-chromatic edits * selection edits * break up d3-interpolate * scale edits * time scale edits * scale edits * scale edits * band edits * band edits * more descriptive titles * band and point edits * sequential edits * diverging edits * quantize edits * quantile edits * threshold edits * doc edits * fix titles * sequential edits * axis edits * axis edits * axis edits * shape edits * shape edits * dark mode chart * dark mode chart * curve edits * interpolate edits * line edits * link edits * radial edits * pie edits * symbol edits * stack edits * stack examples * path edits * polygon edits * quadtree edits * random examples * ease edits * ease edits * ease edits * timer edits * delaunay edits * quadtree find example * voronoi edits * dispatch edits * contour edits * chord edits * chord edits * fix find highlight * quadtree animation * transition edits * transition edits * transition edits * zoom edits * drag edits * brush edits * force edits * voronoi neighbors example * hierarchy edits * api edits * community edits * getting started edits * geo edits * Add short "D3 in React" section (#3659) * Add short "D3 in React" section I know you removed the TODO but I was already trying to fill it in! I think just making the distinction of modules that touch the DOM and those that don't was super clarifying for me personally when I figured that out. And I always forget the most basic ref pattern (and still might've messed it up here). I don't think we should get into updating or interactivity or whatever, but I think just this much goes a long way toward demystifying (and showing just the most basic best practices). * forgot i made data generic, rm reference to normal distribution * useEffect cleans up after itself Co-authored-by: Mike Bostock <mbostock@gmail.com> * Update getting-started.md --------- Co-authored-by: Mike Bostock <mbostock@gmail.com> * build fixes * index edits --------- Co-authored-by: Toph Tucker <tophtucker@gmail.com>
22 lines
2.5 KiB
Markdown
22 lines
2.5 KiB
Markdown
# d3-hierarchy
|
|
|
|
Many datasets are intrinsically hierarchical: [geographic entities](https://www.census.gov/programs-surveys/geography/guidance/hierarchy.html), such as census blocks, census tracts, counties and states; the command structure of businesses and governments; file systems; software packages. And even non-hierarchical data may be arranged hierarchically as with [*k*-means clustering](https://en.wikipedia.org/wiki/K-means_clustering) or [phylogenetic trees](https://observablehq.com/@d3/tree-of-life). A good hierarchical visualization facilitates rapid multiscale inference: micro-observations of individual elements and macro-observations of large groups.
|
|
|
|
This module implements several popular techniques for visualizing hierarchical data:
|
|
|
|
**Node-link diagrams** show topology using discrete marks for nodes and links, such as a circle for each node and a line connecting each parent and child. The [“tidy” tree](./d3-hierarchy/tree.md) is delightfully compact, while the [dendrogram](./d3-hierarchy/cluster.md) places leaves at the same level. (These have both polar and Cartesian forms.) [Indented trees](https://observablehq.com/@d3/indented-tree) are useful for interactive browsing.
|
|
|
|
**Adjacency diagrams** show topology through the relative placement of nodes. They may also encode a quantitative dimension in the area of each node, for example to show revenue or file size. The [“icicle” diagram](./d3-hierarchy/partition.md) uses rectangles, while the “sunburst” uses annular segments.
|
|
|
|
**Enclosure diagrams** also use an area encoding, but show topology through containment. A [treemap](./d3-hierarchy/treemap.md) recursively subdivides area into rectangles. [Circle-packing](./d3-hierarchy/pack.md) tightly nests circles; this is not as space-efficient as a treemap, but perhaps more readily shows topology.
|
|
|
|
See one of:
|
|
|
|
- [Hierarchies](./d3-hierarchy/hierarchy.md) - represent and manipulate hierarchical data
|
|
- [Stratify](./d3-hierarchy/stratify.md) - organize tabular data into a [hierarchy](./d3-hierarchy/hierarchy.md)
|
|
- [Tree](./d3-hierarchy/tree.md) - construct “tidy” tree diagrams of hierarchies
|
|
- [Cluster](./d3-hierarchy/cluster.md) - construct tree diagrams that place leaf nodes at the same depth
|
|
- [Partition](./d3-hierarchy/partition.md) - construct space-filling adjacency diagrams
|
|
- [Pack](./d3-hierarchy/pack.md) - construct enclosure diagrams by tightly nesting circles
|
|
- [Treemap](./d3-hierarchy/treemap.md) - recursively subdivide rectangles by quantitative value
|