JavaScript 中的直方图? [英] Histogram in JavaScript?

问题描述

我有这个收入数据集:

<前>收入 人数0 2459818.8 15044430 12606349.9 12351970 11502990.7 277149109.1 355768130 324246150.3 353239170.2 396008190 396725210 398640230.1 401932250 416079270 412727289.8 385192309.7 343178329.7 293707349.6 239982369.7 201557389.3 165132442.3 442075543.4 196526679.9 146784883.9 486001555 44644

(如您所见，收入水平之间的宽度越接近尾声.)

1. 如何在 JavaScript 中制作这些数据的准确直方图?(在线性 x 轴刻度，范围从例如 0 - 2000)
2. 如何计算出仅显示百分比的人数不同的间隔?
3. 如果我想准确地放置 100 个代表数据的符号，如何我应该决定把它们放在哪里?

解决方案

现有的直方图示例基于 根据样本计算直方图，假设您有一份个人及其收入的列表.在本例中，您已经拥有直方图的数据——您只想显示它.

这里的棘手之处在于您的直方图具有可变宽度的 bin.您可以做的第一件事是忽略每个 bin 的可变宽度，只显示一个简单的棒棒糖图表.x 轴是收入的线性刻度，y 轴是人数的线性刻度:

http://bl.ocks.org/1624656

如果你想把它转换成直方图，你不能只用可变宽度的条代替那些固定宽度的线；您需要对数据进行标准化，以便条形图的 area 对具有该收入的人的频率进行编码.因此，条形的宽度是收入范围(例如第一个 bin 为 0 到 8.8)，条形的高度是人数除以宽度.结果，面积(宽×高)与人数成正比.看起来像这样:

http://bl.ocks.org/1624660

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?

解决方案

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

这篇关于JavaScript 中的直方图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！