Improvement to Histograms

[gaardhus]

First of all thanks for a nice library!

I'm building a dashboard with some different charts, including some histograms.

I have two wishes:

1. I think its most common to have the bins placed in between the axis ticks, as to better indicate that they cover a range of value.
   2. Remove the gap between the bars like.
2. A standalone Histogram class which allows me to provide the raw data and the number of bins, and that then calculates the bin sizes and value counts - however I see if this is beyond the scope of this library.

[gaardhus]

Okay I just found the property to remove the gap between the bars: bandPadding={0}

[techniq]

Hey @gaardhus 👋, glad you're enjoying the library 🫶.

The histogram examples are currently built with a bandScale (BarChart) which is why the axis ticks are centered instead of between the bins, which are incorrect.

I just updated the examples on the new (WIP) docs to use a linear scale (to fix the axis) and leverage Rect (since Bar is only for band scale).

This does make those examples a little more verbose by rendering explicit marks, and is (ab)using LineChart to simplify some of the setup (we could also have used <BarChart xScale={scaleLinear() ...> but that felt more abusive).

<LineChart {data} x={['x0', 'x1']} y="length">
  {#snippet marks({ context })}
    {#each data as d}
      <Rect
        x={context.xScale(d.x0) + 1}
        y={context.yScale(d.length)}
        width={context.xScale(d.x1) - context.xScale(d.x0) - 2}
        height={context.yScale(0) - context.yScale(d.length)}
        class="fill-primary"
      />
    {/each}
  {/snippet}
</LineChart>

With that said, we've also been working on a new state-refactor overhaul which provides a TON of improvements, including aligning Chart and simplified charts (BarChart, LineChart, etc), so the use of LineChart above would be replaced with just Chart but still provides all the use cases of a LineChart (snippets with default impl, series support, etc).

Also have plans to allow all primitives to also be data-driven with accessors (ex. <Rect x="x0" y={d => d.length}>) and a bunch of other things.

I definitely think streamlining the histogram use cases, either via a Histogram "simplified component", or providing higher level abstraction building blocks (similar to ObservablePlot's transforms, which I've been contemplating for a while) is on the roadmap for sure, but have a lot of active threads at the moment.