Histogram can't handle single-bin data

[PAK90]

I'm attempting to make a crossfilter-esque dashboard and part of that involves using the histograms. They're great, except when I filter my data to include only one bin's worth of data (e.g. reducing data to one category, apples, out of ['apples', 'oranges', 'bananas']). At this point I get an error: Cannot read property 'bin0' of undefined. I'm assuming it's attempting to calculate bins on the category for which apples is a part of, but comes up with only one bin, hence problems. Is there a simple workaround for this?

[williaster]

hey @PAK90, thanks for checking out the histogram package and raising the issue! I'll look into this today and hopefully get a fix in for it, or let you know if I find an easy workaround.

[williaster]

@PAK90 can you link to a codesandbox to reproduce this? In my own testing for pre-binned or un-binned categorical data, I do not encounter this error.

[PAK90]

Here's a sample of the data I'm passing that's giving me trouble: https://gist.github.com/PAK90/dbe47c09ba90a7b3e9ebd118a42270a4. Note all the fields labeled 'manaCost' are identical (11).

And here's my code for the histogram in case I'm doing something silly in it:

<Histogram
          ariaLabel="Mana cost"
          orientation="vertical"
          height={200}
          width={400}
          cumulative={false}
          normalized={false}
          valueAccessor={sortedData => {
            return sortedData.manaCost;
          }}
          binType="numeric"
          renderTooltip={({ event, datum, data, color }) => (
            <div>
              <strong style={{ color }}>{datum.bin0} to {datum.bin1}</strong>
              <div><strong>count </strong>{datum.count}</div>
            </div>
          )}
        >
          <BarSeries
            animated
            rawData={sortedData} // contains the data posted in the gist
          />
          <XAxis label="Mana Cost" />
          <YAxis />
        </Histogram>

[williaster]

Ah okay, numeric data not categorical. I can reproduce the error now will try to get a fix out soon.

[williaster]

A quick fix for you would be to set binValues to an array of at least 2 numbers on the Histogram component.

[kaiyoma]

Any update on this? I just started using this histogram component today and it's really great, except I'm also running into this error scenario.

[williaster]

@kaiyoma yes! sorry for the delay, have been swamped at work. Dug in tonight / have a fix for it, will PR soon and should be able to release a new version tomorrow 👍

[williaster]

should be fixed in @data-ui/histogram@^0.0.63

[kaiyoma]

@williaster I don't think this is quite fixed. If the value in the single bin is greater than 1, the x-axis goes in the wrong direction and the upper bound of the bin is smaller than the lower bound.

Sandbox: https://codesandbox.io/s/p5z87y6ko0

The problem becomes much more exaggerated if the value is much larger than 1, because it seems the upper bound of the bin is always 1.

[williaster]

oooof, this looks like it comes from d3 histogram's behavior. In the case where there is one value, it's not clear what the size of the bin should be so d3 returns a bin with equal bin0 and bin1. This is problematic to render because a range can't have the same start and end:

curious what you think the expected behavior should be. I could increment the upper bin by 1 for this edge case, but it's not ideal

[kaiyoma]

I think "adding one" to make the upper bound is reasonable. Like you said, it's an edge case, where everything falls into a single bin, so I wouldn't lose any sleep over it. 😄 Making an artificially-sized bin is certainly better than rendering the x-axis in the wrong direction.

[williaster]

👌 Released this fix in 0.0.64

[kaiyoma]

Great, the fix works just like I thought it would. Thanks again!