Skip to content

Add BarChart for categorical data comparison#18

Merged
islubee merged 1 commit intomainfrom
claude/explore-repo-overview-aYE7G
Apr 14, 2026
Merged

Add BarChart for categorical data comparison#18
islubee merged 1 commit intomainfrom
claude/explore-repo-overview-aYE7G

Conversation

@islubee
Copy link
Copy Markdown
Owner

@islubee islubee commented Apr 14, 2026

Summary

  • New BarChart component — compares categorical values side by side using d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis
  • Axis improvementAxisHorizontal now supports band/ordinal scales (falls back to scale.domain() when scale.ticks() is unavailable, centers labels with scale.bandwidth() / 2)
  • Reuses existing Bars and Axis primitives — no new SVG primitives needed
  • Consistent API with the rest of the library (xLabel/yLabel, empty data returns null, default accessors)
<BarChart
  data={[{ category: 'Mon', value: 12 }, { category: 'Tue', value: 8 }]}
  xAccessor={d => d.category}
  yAccessor={d => d.value}
  xLabel="Day"
  yLabel="Sales"
/>

Test plan

  • npm test passes (55 tests, 7 new for BarChart)
  • npm run build-lib succeeds
  • CI checks pass on Node 18, 20, 22
  • Verify bars render one rect per data point
  • Verify x-axis tick labels are centered within each bar
  • Verify empty data renders nothing

https://claude.ai/code/session_01Bf9veNX9mqfMqrCEGnujAo

New chart using d3.scaleBand for the x-axis and d3.scaleLinear for
the y-axis, reusing the existing Bars and Axis primitives.

Also updates AxisHorizontal to support band/ordinal scales:
- falls back to scale.domain() when scale.ticks() is not available
- centers tick labels within each band via scale.bandwidth() / 2

API:
  <BarChart
    data={data}
    xAccessor={d => d.category}
    yAccessor={d => d.value}
    xLabel="Day"
    yLabel="Sales"
  />

7 tests added (55 total).

https://claude.ai/code/session_01Bf9veNX9mqfMqrCEGnujAo
@islubee islubee merged commit 1cf5f2e into main Apr 14, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants