Histogram

[michaelroevievictoria]

Question

Do have a support in Histogram ? And do you have docs on this ?

Background Info/Attempts

[carbonrobot]

Currently there is no Histogram chart type, but we will add it to the feature list.

[A-PS1999]

I'm interested in contributing to this library and, if possible, would like to pick up and work on this open issue. I have in fact already cloned the repository and am doing some thinking and exploratory coding on implementing a histogram component.

It's still early stages but I've been writing the component and associated hook with the idea in mind that the user would provide an array of bin objects which I can then use to create bars of frequency data by incrementing each bin's count when an X datapoint falls within a given bin.

I appreciate that I am an unknown quantity given that I haven't contributed to this library before. Consequently if the maintainers of this library would prefer that I didn't work on this feature, please let me know. If I shouldn't work on this, I'd appreciate being pointed towards an issue which you'd be happy for me to contribute to.

[carbonrobot]

@A-PS1999 We welcome anyone to contribute to the library. Just a few things to keep in mind:

We typically start working on a new feature by collaborating on the design before we write any code. We need to decide what is in scope for this chart; what is the input shape, will it support automatic binning, will it support groups, does it fit the cartesian axis or need a new one, etc.

We also typically analyze other libraries and look at the approaches they use for inspiration and design notes.

Only then do we start thinking about the implementation and coding of the feature.

[A-PS1999]

Thank you for your reply, these are very valid points to raise. I'll look into how other libraries approach this and do some thinking on implementation. Collaborating on design will be useful as it may help me improve my understanding of this library's inner workings. More importantly, of course, it'll be good to develop a consensus on this feature.

[A-PS1999]

OK, after some consideration, here are some of my thoughts on the design:

• I think automatic binning is something which can certainly be supported. What I had in mind is that, as an alternative to providing specific bins, users can provide a step value which would allow bins of a fixed size to be automatically created. If users provide both, the specific bins will take precedence.
• Most of the logic for the existing CartesianAxis seems perfectly reusable, but the main area I'm unsure of is how some of the labels and ticks can be created. Since CartesianAxis is within CartesianChart and the bins/step options would be passed to the Histogram component (which is lower in the hierarchy) it doesn't immediately seem feasible to generate labels for the bins without having a different axis component for the histogram. Open to thoughts on this.
• Groups seem comparatively more complicated but given that stacked bar charts are already implemented, it seems appropriate to make this an option for a Histogram component also.
• In terms of the input shape for the bins, I had in mind an array of the following:

type HistogramBin = {
    inclusiveStart: Number,
    exclusiveEnd: Number
}

I've seen other libraries use a simpler array like so [0, 25, 50, 75, 100], but I feel a more structured array of objects is clearer, especially in terms of highlighting (as is often the case for histograms) that the upper bound of a given bin is exclusive.
In terms of props the Histogram component this is roughly what I have in mind:

chartBounds: ChartBounds;
points: PointsArray[];
animate?: PathAnimationConfig;
bins?: HistogramBin[];
step?: Number;
innerPadding?: number;
colors?: Color[]; // In the event of groups/stacked bars

Does this all sound alright? If there are other key areas I haven't considered or anything you think I ought to clarify, please let me know. Given what was rightly pointed out before, I won't start working on this just yet.

Here are a few libraries and other resources I looked at for their approach to histogram charts:
https://github.com/williaster/data-ui
https://github.com/ag-grid/ag-charts/tree/484d122e116096616dfdd29a127d9bfa9ed1e5ee
https://www.react-graph-gallery.com/histogram