Annotations / Links

[techniq]

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

---

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

[techniq]

See also Highlight component

[techniq]

See discussion with some thoughts