layerchart
layerchart copied to clipboard
techniq
Hierarchy / Graph charts
Hierarchy
-
vx-hierarchy-examples
- https://nxmen.csb.app/
- https://github.com/airbnb/visx/tree/master/packages/visx-hierarchy/src/hierarchies
- d3.groups as a hierarchy
- [x] Tree
- https://github.com/Klortho/d3-flextree - supports nodes of various sizes
- https://observablehq.com/@d3/collapsible-tree
- https://github.com/techniq/vx-hierarchy-examples/blob/master/src/examples/Tree.tsx
- https://nxmen.csb.app/
- https://github.com/techniq/layerchart/issues/11
- https://observablehq.com/@mbostock/sars-cov-2-phylogenetic-tree
- https://observablehq.com/@d3/indented-tree
- https://observablehq.com/@d3/hierarchical-edge-bundling/2
- https://observablehq.com/@d3/tree-of-life
- https://observablehq.com/@nitaku/tangled-tree-visualization-ii?collection=@observablehq/visualization
- http://bl.ocks.org/robschmuecker/7880033
- https://github.com/bumbeishvili/org-chart
- https://observablehq.com/@john-guerra/tree-value
- https://observablehq.com/@laotzunami/collapsible-indented-tree
- [ ] Bracket
- https://observablehq.com/@rabelais/creating-empty-tournament-bracket-model
- https://observablehq.com/@nor/playoff-bracket-exploration-part-8
- https://challonge.com/
- Project 3: Dynamically generated tournaments
- Generating Tournaments
- Kaggle brackets for March Madness
- https://observablehq.com/@mcmcclur/ncaa-brackets
- https://codepen.io/collection/OLYGEm
- [x] Treemap
- Pancake - Treemap
- https://observablehq.com/@d3/treemap
- https://observablehq.com/@d3/nested-treemap
- https://observablehq.com/@d3/zoomable-treemap
- https://observablehq.com/@d3/animated-treemap
- https://observablehq.com/@nitaku/population-of-italy-by-administrative-division-treemap
- https://observablehq.com/@nitaku/population-of-italy-by-administrative-division (Parallel Treemaps)
- Isometric treemap with tree colors (flare)
- Cascaded treemap
- https://nivo.rocks/treemap/
- https://www.amcharts.com/demos/drill-down-treemap/
- https://observablehq.com/@albutko/cascading-zoomable-treemap
- https://observablehq.com/@analyzer2004/3d-treemap
- https://observablehq.com/@jonhelfman/us-county-treemaps
- https://observablehq.com/@d3/marimekko-chart
- https://flowingdata.com/2014/07/02/jobs-charted-by-state-and-salary/
- https://observablehq.com/d/13a2492a7c315c79
- [ ] Voronoi Treemap
- https://github.com/Kcnarf/d3-voronoi-treemap
- [x] Circle pack
- https://observablehq.com/@leandermaerkisch/learning-path-zoomable-circle-packing
- https://nivo.rocks/circle-packing/
- https://observablehq.com/@didoesdigital/d3-circle-packing-with-data-wrangling-and-interactive-grou
- https://observablehq.com/@d3/zoomable-circle-packing
- https://observablehq.com/@mbostock/pack-o-matic
- https://observablehq.com/@analyzer2004/3d-circle-packing
- https://observablehq.com/@mbostock/bubble-o-matic
- https://observablehq.com/@mbostock/file-size-visualizer-bubbles
- https://observablehq.com/@mbostock/wheres-that-2-trillion-going
- https://observablehq.com/@mbostock/packing-circles-inside-a-rectangle
- https://observablehq.com/@mbostock/example-authors
- https://observablehq.com/@mbostock/circle-packing-methods
- https://observablehq.com/@d3/bubble-chart
- [x] Sankey
- https://layercake.graphics/example/Sankey
- https://github.com/techniq/svelte-chart-examples/blob/master/src/Sankey.svelte
- https://nxmen.csb.app/
- https://nivo.rocks/sankey/
- https://www.amcharts.com/demos/sankey-diagram/
- https://observablehq.com/@fil/sankey-link-paths
- https://observablehq.com/@timelyportfolio/partsankey-partition-sankey
- https://observablehq.com/@didoesdigital/21-july-2020-d3-sankey-diagram-with-hovers-and-percentages?collection=@didoesdigital/journal-getting-started-with-data-viz-collection
- graphFromCsv
- https://observablehq.com/@rachelanddata/dallas-police-use-of-force-by-race
- https://observablehq.com/@sgregson/astroneer-crafting
- https://observablehq.com/@nimitnshah/parallel-sets-dark-mode-highlight-on-hover
- https://observablehq.com/@bda/lafe
- https://developers.google.com/chart/interactive/docs/gallery/sankey
- https://observablehq.com/@d3/nike-quarterly-statement
- https://observablehq.com/@mbostock/flow-o-matic
- https://observablehq.com/@stroked/drill-down-sankey
- https://observablehq.com/@benjamesdavis/elijah-meeks-particle-sankey
- https://observablehq.com/@adv1996/chart-recreation-nfl-schedule-alluvial-diagram
- https://observablehq.com/@bda/lafe
- [ ] Vertical
- https://observablehq.com/@tomshanley/vertical-sankey-with-elegant-links-to-entry-and-exit-nodes
- https://www.amcharts.com/demos/vertical-sankey-diagram/
- https://observablehq.com/@quynhvng/income-statement-sankey
- https://www.visualcinnamon.com/portfolio/adyen-report-2019/
- [x] Icicle
- Vertical / Horizontal
- https://nxmen.csb.app/
- https://github.com/techniq/vx-hierarchy-examples/tree/master/src/examples
- https://observablehq.com/@d3/zoomable-icicle
- https://www.amcharts.com/demos/vertical-partition-chart/
- https://www.amcharts.com/demos/horizontal-partition-chart/
- https://observablehq.com/@kerryrodden/sequences-icicle
- https://observablehq.com/@john-guerra/zoomable-variable-size-icicle
- https://observablehq.com/@alex-r-bigelow/categorical-zoomable-icicle#aggregateData
- [x] Sunburst
- https://nxmen.csb.app/
- https://github.com/techniq/vx-hierarchy-examples/tree/master/src/examples
- https://observablehq.com/@d3/zoomable-sunburst
- https://nivo.rocks/sunburst/
- https://www.amcharts.com/demos/sunburst-chart/
- https://www.amcharts.com/demos/drill-down-sunburst-chart/
- https://observablehq.com/@kerryrodden/sequences-sunburst
- https://observablehq.com/@mbostock/sunburst-o-matic
- https://chrisbateman.github.io/webpack-visualizer/
- [ ] Small multiples / Separated
- Would be nice to switch between grouped, stacked, or small multiples
- Stacked, Grouped, PerCent or SmallMultiple
- https://observablehq.com/@mkfreeman/separated-bar-chart
- https://observablehq.com/@ben-tanen/the-relentless-2020-news-cycle-in-one-chart
- https://observablehq.com/@mast4461/n-level-zoomable-sunburst
- https://observablehq.com/@observablehq/plot-barley-trellis
- [ ] Chord
- https://airbnb.io/visx/chord
- https://github.com/airbnb/visx/tree/master/packages/visx-chord
- https://observablehq.com/search?query=chord
- https://nivo.rocks/chord/
- https://observablehq.com/@d3/chord-dependency-diagram
- https://observablehq.com/@d3/chord-diagram
- https://observablehq.com/@d3/bilevel-edge-bundling
- https://airbnb.io/visx/chord
- [x] Funnel
- https://nivo.rocks/funnel/
- visx
- https://github.com/airbnb/visx/issues/207
- https://codesandbox.io/s/m46lkn49j
- https://codesandbox.io/s/dazzling-chatterjee-kdisr?file=/src/index.tsx
- https://dribbble.com/shots/2673159-Funnel-UI-concept
- https://www.amcharts.com/demos/funnel-chart/
- https://github.com/greghub/funnel-graph-js
- https://observablehq.com/d/641e6efa7f8b3f84
- https://observablehq.com/d/25396a3f87f1058d
- https://observablehq.com/@shivgarg5676/funnel-chart
- https://observablehq.com/@marksteve/funnel-o-matic
Oh boy, I'm really looking forward to seeing the Funnel chart. How can I be of help @techniq ?
@jerriclynsjohn Consider me nerd sniped 😁
All the constructs were already available, and I modeled this off of the visx example
The main points are:
- Define both sides of the Area (
y0/y1) with one being the inverse / negative - Interpolate extra points to make the curve smoother
There are a few visual approaches you could go (position of labels, curve applied (linear vs basis, etc), remove interpolate of extra points (only useful for the smooth curves, etc), but hopefully this gives you a good reference. It's more complicated than a basic funnel would need to be (includes gradient, "mirrored" areas for more visual interest, etc).
Take the look at the PR preview of the docs or view the PR (I'll merge soon)