JavaScript中的直方图？

Question

我有这个收入数据集:

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

(如您所见,收入水平之间的宽度在结束时变得更大.)

1. 如何在JavaScript中对这些数据进行准确的直方图？(在线性x轴刻度上,范围从例如0 - 2000)
2. 如何计算在不同时间间隔仅显示百分比的人数？
3. 如果我想准确地放置100个代表数据的符号,我该如何确定它们的放置位置？

Answer 1

现有的直方图示例基于从样本计算直方图,例如,如果您有个人及其收入的列表.在这种情况下,您已经拥有直方图的数据 - 您只想显示它.

这里棘手的是你的直方图有可变宽度的箱子.您可以做的第一件事是忽略每个bin的可变宽度,只显示一个简单的棒棒糖图表.在X轴是收入线性刻度,而ÿ轴是为人类数线性刻度:

http://bl.ocks.org/1624656

如果要将其转换为直方图,则不能仅使用可变宽度条替换那些固定宽度的线; 您需要规范化数据,以便条形区域编码具有该收入的人的频率.因此,条形的宽度是收入范围(例如第一个区域的0到8.8),条形的高度是人的数量除以宽度.结果,面积(宽度×高度)与人数成比例.看起来像这样:

http://bl.ocks.org/1624660