Question

32

Histogram in JavaScript?

rated 0 times [ 39] [ 7] / answers: 1 / hits: 25300 / 13 Years ago, sat, november 19, 2011, 12:00:00

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.)

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)

How do I factor out the number of people to show only percentages at
different intervals?

If I'd like to place exactly 100 symbols representing the data, how
do I decide where to place them?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaylanw

Add To Favorites

Follow

Total Points: 730

Total Questions: 98

Total Answers: 95

Location: Saudi Arabia

Member since Tue, Nov 29, 2022

2 Years ago

answered 13 Years ago eliezerc · Accepted Answer

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