JavaScript bar graph?

Question

I have this data set for income:

  Income Number of people
 0 245981
 8.8 150444
 30 126063
 49.9 123519
 70 115029
 90.7 277149
 109.1 355768
 130 324246
 150.3 353239
 170.2 396008
 190 396725
 210 398640
 230.1 401932
 250 416079
 270 412727
 289.8 385192
 309.7 343178
 329.7 293707
 349.6 239982
 369.7 201557
 389.3 165132
 442.3 442075
 543.4 196526
 679.9 146784
 883.9 48600
 1555 44644

(As you can see, the width between income levels increases toward the end.)

• How to make an accurate histogram of this data in JavaScript? (On a linear x-axis scale with a range from 0 to 2000)
• How can I calculate the number of people to show only percentages at different intervals?
• If I want to place exactly 100 characters representing the data, how do I decide where to place them?

Answer 1

Existing histogram examples are based on calculating histograms from samples, for example, if you have a list of individuals and their income. In this case, you already have data for the histogram - you just want to display it.

The difficulty here is that your histogram has cells of variable width. The first thing you can do is ignore the variable width of each bin and just display a simple diagram of the candy. The x axis is a linear scale of income, and the y axis is a linear scale for counting people:

http://bl.ocks.org/1624656

If you want to convert this to a histogram, you cannot just replace these fixed-width lines with variable-width bars; you need to normalize the data so that the stroke area encodes the frequency of people with that income. Therefore, the width of the bar is a range of income (for example, from 0 to 8.8 for the first bunker), and the height of the bar is the number of people divided by the width. As a result, the area (width × height) is proportional to the number of people. It looks like this:

http://bl.ocks.org/1624660

Answer 2

If you just need or need to sort the data in the bunkers, look at histogram.js without plotting .