layerchart

layerchart copied to clipboard

Ideas

• How best to support Svg, Html, and Canvas for drawing links and text
• Labels
  • Best to use Html (by default) for richer text styling and word wrapping, but supporting Canvas is nice once we support creating PNGs of a chart to make sure everything is captured.
• Should the Annotation component be defined outside of a specific rendering context (like Tooltip) to allow mixing rendering contexts inside (draw links with Svg, text with Html, for example)
• Determine what is available with components like Highlight, Link, Rule, and Point
  • Examples:
    • https://www.layerchart.com/docs/examples/Columns#highlight_individual_bar
    • https://www.layerchart.com/docs/examples/Columns#highlight_individual_bar_(line)
    • https://www.layerchart.com/docs/examples/Columns#average_annotation_rule
    • https://www.layerchart.com/docs/examples/Area#multiple_series

---

Types

• [x] Annotate axis (point with tooltip)
• [ ] Highlight range
  • [ ] Horizontal (threshold)
    • [ ] above / below
    • [ ] with label (point)
  • [ ] Vertical
    • [ ] before / after
    • [ ] with label (point)
  • [ ] Pattern
  • [ ] Gradient
• [ ] Callout specific point (circle with line to text)
• [ ] Above / below marks

---

Reference

• https://d3-annotation.susielu.com/
  • https://d3-annotation.susielu.com/#examples
• https://airbnb.io/visx/annotation
  • https://github.com/airbnb/visx/tree/master/packages/visx-annotation
  • https://github.com/airbnb/visx/tree/master/packages/visx-shape/src/shapes/link
  • https://airbnb.io/visx/linktypes
• Corner connectors
• https://observablehq.com/@saneef/056-connections
• D3 curve explorer
• https://observablehq.com/@harrystevens/rounded-polyline?collection=@harrystevens/components
• Link types
  • [ ] Curved Edges (step)
    • Vertical / Compact Vertical
    • Horizontal / Compact Horizontal
    • https://observablehq.com/@nitaku/tangled-tree-visualization
    • https://observablehq.com/@zzzev/tangled-tree-visualization-ii-w-adjusted-leaf-labels
• Band/range
• Examples
  • https://pfa-1yr.loyolaccj.org/
• d3.ringNote
  • Ring notes
  • Map Annotation
  • Chart Annotation
• swoopyDrag
• https://www.chartjs.org/chartjs-plugin-annotation/

See also Highlight component

See discussion with some thoughts