Plot histogram in ReactJS

user_15212955 0
Viewed 295

Suppose I want to plot histogram for time taken to read each book.

I calculated time to read each book and stored in an array as

const timeToRead = [10,12,8,3,7]

As I gone through different methods on how to plot histogram .... I found that to display data , it should be in range as:

const timeToRead = [0-5,5-10,10-15]

But on basis of my previous data how can I convert it into range, so it can satisfy condition to plot histogram.

Or is there any other method to plot histogram?

Let me know if any further details is need, also if I'm not clear enough do let me know.

How to make histogram

react-hooks reactjs node.js javascript
1 Answers

You have to reduce the data you have to get counts of points that go into each bucket.

0-5, 5-10 etc being the buckets.

Now, you could hand-code a reducer for yourself that gives you the count of data points for each of those bins or use something like d3-array package that has tons of stuff to get info out of data.

Here's a quick example.

let bin = d3.bin()
    .domain(timeToRead)
    .thresholds([0, 5, 10]);

Mode Reading

user_12084690
Related