Legends (colors, radius, geo distance)

[techniq]

• General
  • https://airbnb.io/visx/legends
• Color
  • https://observablehq.com/@d3/color-legend
  • https://observablehq.com/@observablehq/plot-legends
  • https://observablehq.com/@mbostock/continuous-color-guide
  • Color Ramp
  • Generate CSS gradients with d3-scale-chromatic
  • 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
  • Add swatches support (for ordinal, primarily)
  • Show ticks across range (for threshold, primarily)
  • Vertical orientation
  • Support hovering / clicking to filter data
• Circle radius
  • https://observablehq.com/@jonhelfman/circle-legend
  • https://observablehq.com/@harrystevens/circle-legend?collection=@harrystevens/components
  • https://observablehq.com/@mizinov/area-comparison
  • https://observablehq.com/@bayre/circle-legend
  • https://observablehq.com/@jcolot/nested-circles-legend
  • https://observablehq.com/@eesur/reusable-circle-legend
• Geo
  • https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar
  • https://observablehq.com/@stardisblue/scale-bar
  • https://observablehq.com/@jgaffuri/nice-scale-bar

Examples

• https://www.reuters.com/graphics/TURKEY-QUAKE/zdvxdngmzvx/