Bar Chart features / examples

[techniq]

• Column and Bar
  • Make sure works with Tooltip, Overlay, etc
• Support both axises as bands
  • https://observablehq.com/@observablehq/plot-cell
  • Better serviced by Cell component
• Brush / Zoom
  • Brushing Bar Chart
  • https://observablehq.com/@d3/zoomable-bar-chart
  • https://observablehq.com/@didoesdigital/26-june-2020-d3-bar-chart-brush
  • How to create a zoomable and animated Bar Chart with d3.js
  • https://codepen.io/medeirosrich/pen/Wzwjzp
    • https://stackoverflow.com/questions/49279159/add-zoom-to-a-grouped-bar-chart-that-uses-a-scaleband
  • https://stackoverflow.com/questions/70801202/d3-bar-chart-horizontal-pan
• Better date handling ([Bars] Support scaleTime() / interval #62)
  • https://observablehq.com/@observablehq/plot-interval
  • https://observablehq.com/@observablehq/plot-ordinal-bar-chart
  • https://observablehq.com/@observablehq/plot-ordinal-scale-interval
  • https://github.com/mattlangeman/layerchart/tree/temp-bar-timescales
• Improve handling of Tooltips with group/stacked data (including adding some examples)
  • Simplified Charts #224

---

Examples

• https://observablehq.com/@d3/bar-chart-transitions
• https://observablehq.com/@d3/hierarchical-bar-chart
• Bar chart race
  • https://observablehq.com/@d3/bar-chart-race
    • https://www.d3unchained.com/examples/bar-chart-race
      • https://github.com/mattlangeman/barchart-race
  • https://observablehq.com/@mbostock/most-popular-programming-languages-2004-2021
  • https://observablehq.com/@mbostock/bar-chart-race-with-scrubber
  • https://observablehq.com/@d3/bar-chart-race-explained
  • https://observablehq.com/@christophe-yamahata/bar-chart-race-with-images
  • https://observablehq.com/d/300af6c9d781815d
  • https://observablehq.com/@vasturiano/covid-19-bar-chart-race
• Diverging
  • https://observablehq.com/@d3/diverging-bar-chart
  • https://observablehq.com/@d3/diverging-stacked-bar-chart
  • https://observablehq.com/@observablehq/plot-diverging-stacked-bar
• Waterfall
  • https://observablehq.com/@kevante0421/power_bi_sample_chart
  • https://observablehq.com/@declann/saas-model-experience-analysis
  • https://observablehq.com/@rudzinski/waterfall-chart
  • https://observablehq.com/d/3611d92e841428db
  • https://vega.github.io/vega-lite/examples/waterfall_chart.html
  • https://altair-viz.github.io/gallery/waterfall_chart.html
  • https://codesandbox.io/p/sandbox/yjol7n7qq9?file=%2Findex.js
• https://observablehq.com/@kerryrodden/stacked-to-grouped-bars-o-matic
• https://observablehq.com/@d3/single-stack-normalized-horizontal-bar-chart
• https://observablehq.com/@d3/grouped-bar-chart
• https://observablehq.com/plot/marks/bar

[risalfajar]

Could you also add an example of Grouped Bar Chart with Tooltip?

[techniq]

@risalfajar Yeah, this one is not as straight forward as it should be. Typically I will attach the "item group data" to each item as only one is currently selected with the current tooltip={{ mode: 'band' }} heuristics.

I'll likely either update createStackData to do automatically, or try to improve TooltipContext showTooltip() mode handling to better handle this

[techniq]

@risalfajar Sorry for such a long delay, but finally getting around to tackling this as part of the Simplified Charts PR

CleanShot.2024-08-28.at.00.50.11.mp4

Still some work to go, but the new simplified <BarChart> will support group and/or stacking with tooltips, as well as rolling your own via <Chart> (which this video is using)