Histogram in JavaScript?

Question

I have this dataset 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 gets larger towards the end.)

1. How do I make an accurate histogram of this data in JavaScript? (On a linear x-axis scale with a range from for example 0 - 2000)
2. How do I factor out the number of people to show only percentages at different intervals?
3. If I'd like to place exactly 100 symbols representing the data, how do I decide where to place them?

Temper

something like this? mbostock.github.com/protovis/ex/histogram.html – Heda

Yes, but the Bostock's D3 library is better: github.com/mbostock/d3/wiki/Histogram-Layout I'd appreciate some code/pseudo-code for my 3 questions. – Temper

like this? mbostock.github.com/d3/ex/population.html – Heda

Nope, that doesn't bin any data ... – Temper

none of the examples have what you need? – Heda

This one might have: github.com/mbostock/d3/wiki/Histogram-Layout ... But I can't figure out how to use it with the given dataset nor how to answer q2) and q3). – Temper

I'm a bit confused here. Your data is already binned into income ranges, right? So how/why do you want to bin it again? And how can you have 100 symbols (bars, in a histogram, right?) if you only have 26 data points? – Bemire

Answer 1

The existing histogram examples are based on computing the histogram from samples, say if you had a list of individual people and their incomes. In this case, you already have the data for the histogram—you just want to display it.

The tricky thing here is that your histogram has variable-width bins. The first thing you can do is ignore the variable-width of each bin and just display a simple lollipop chart. The x-axis is a linear scale for income, and the y-axis is a linear scale for count of people:

http://bl.ocks.org/1624656

If you want to convert this to a histogram, you can't just replace those fixed-width lines with variable-width bars; you need to normalize the data so that the area of the bar encodes the frequency of people with that income. Therefore, the width of the bar is the income range (such as from 0 to 8.8 for the first bin), and the height of the bar is the quantity of people divided by the width. As a result, the area (width × height) is proportional to the number of people. That looks like this:

http://bl.ocks.org/1624660

Efficient

Answer 2

If you just want or need to sort the data into bins, without plotting take a look at histogram.js.

Demetricedemetris