layerchart
layerchart copied to clipboard
techniq
Composable Svelte chart components to build a wide range of visualizations
Brush WIP [ChartClipPath] Rename `includePadding` to `full` to match `` [Frame] Expose `rectEl` and forward `mousedown` and `touchstart` events [Brush] Forward `mousedown` and `touchstart` events [Brush] Use SVG/rect instaed of...
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker - https://svgwg.org/specs/markers/ - http://tutorials.jenkov.com/svg/marker-element.html - https://observablehq.com/@basilesimon/arrowheads-on-axes - https://github.com/airbnb/visx/tree/master/packages/visx-marker - https://airbnb.io/visx/curves - https://observablehq.com/@bumbeishvili/svg-markers - https://observablehq.com/@observablehq/plot-custom-markers - [Globe with geomark icons](https://observablehq.com/d/9a12cee2e07453be)
- [ ] General - https://airbnb.io/visx/legends - [x] Color - https://observablehq.com/@d3/color-legend - https://observablehq.com/@observablehq/plot-legends - https://observablehq.com/@mbostock/continuous-color-guide - [Color Ramp](https://svelte.dev/repl/6196ff3a43da4582b9ca9ac6680580f8?version=3.48.0) - [Generate CSS gradients with d3-scale-chromatic](https://svelte.dev/repl/5dfa4750357f42c7bf553bcc62a4b395?version=3.48.0) - https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient/ - https://clhenrick.github.io/color-legend-element/ - https://observablehq.com/@clhenrick/threshold-color-scale...
## Basic - [x] Bar / Column - [x] Vertical - [x] Horizontal - [x] Stacked - [x] Grouped - [x] Grouped and Stacked - [Prototypes / API discussion](https://github.com/mhkeller/layercake/issues/29#issuecomment-875904073) -...
## Use cases - [x] Projections - https://observablehq.com/@d3/world-map - https://observablehq.com/@d3/orthographic?collection=@observablehq/maps - https://observablehq.com/@benjamesdavis/orthopgragic-map - https://observablehq.com/@floledermann/projection-playground - https://observablehq.com/@toja/magnifying-glass-projections?collection=@observablehq/maps - https://observablehq.com/@observablehq/plot-projections - https://observablehq.com/@d3/gs50 - https://observablehq.com/@fil/modified-stereographic-gs50-glsl - https://observablehq.com/@paoyo1/projections - https://observablehq.com/@paoyo1/projection-miller - https://observablehq.com/@jashkenas/interpolating-d3-map-projections - http://mbostock.github.io/d3/talk/20111018/azimuthal.html...
Consider creating an `AutoChart` component similar to Observable Plot's [auto mark](https://observablehq.com/plot/marks/auto). See initial [discussion](https://discord.com/channels/920755200552226868/1172178862231257198) for some context. Some initial thoughts: - Identify the TooltipContext mode based on data/scales ([reference](https://github.com/techniq/layerchart/blob/master/src/lib/components/TooltipContext.svelte#L54-L63)) -...
- https://github.com/erikbrinkman/d3-dag - https://observablehq.com/@erikbrinkman/d3-dag-topological - https://observablehq.com/@erikbrinkman/d3-dag-sugiyama - [d3-dag with a big CTE (Svelte REPL)](https://svelte.dev/repl/83b44d5d50be4b8bb65d55cea1a5d1f1?version=3.49.0) - [graphology](https://www.npmjs.com/package/graphology) - [webcola](https://ialab.it.monash.edu/webcola) - [dagre](https://github.com/dagrejs/dagre) - https://github.com/dagrejs/dagre/wiki - https://github.com/dagrejs/dagre-d3 - https://observablehq.com/@mbostock/hello-dagre - https://observablehq.com/@mbirk/dagre - [cytoscape](https://js.cytoscape.org/)
- [x] Set selection via props (change range, bind, etc) - [x] Synced / Coordinated views - https://observablehq.com/@yurivish/coordinated-views - https://observablehq.com/@d3/brushable-scatterplot-matrix - https://layercake.graphics/example/SyncedBrush - https://observablehq.com/@weiglemc/brushing-and-linking-example-with-vega-lite - [x] Click outside to clear...
- [ ] Bump chart - https://observablehq.com/@analyzer2004/bump-chart - https://observablehq.com/@fil/plot-bump-chart - https://nivo.rocks/bump/ - https://nivo.rocks/area-bump/ - [Bump Chart of State Population Ranks](https://observablehq.com/@washpostgraphics/bump-chart-of-state-population-ranks) - https://github.com/d3/d3-shape#curveBumpX - https://codepen.io/borntofrappe/pen/qBKNPXY?editors=0010 - https://observablehq.com/d/aa2ed4c606d995c0 - https://observablehq.com/@benoldenburg/f1-2022-season - https://observablehq.com/d/aa2ed4c606d995c0...