2d:null 2e:["$","title",null,{"children":"D3: Histogram | Benbinbin | Observable"}] 33:T20ab,chart = { // 以下有一些关于图形的宽高、边距尺寸相关的参数 // margin 为前缀的产生是在外四边留白，构建一个显示的安全区，以便在四周显示坐标轴 const width = 960; const height = 500; const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 40; /** * * 对原始数据 unemployment 进行转换 * */ // 使用 d3.bin() 将数据点进行分组/装箱 // d3.bin() 方法的作用解析参考 👇 下一个 📝 cell const bins = d3.bin() .thresholds(40) // 设置分组数量 // 将数据点的 d.rate 属性设置为分组的依据（而不是整个数据点对象） .value((d) => d.rate) (unemployment); /** * * 创建容器 * */ // 主要使用 d3-selection 模块的 API // 具体可以参考 https://github.com/d3/d3-selection 或 https://d3js.org/d3-selection // 使用方法 d3.create("svg") 创建一个 svg 元素，并返回一个选择集 selection // 使用选择集的方法 selection.attr() 为选择集中的所有元素（即

D3: Histogram

D3 › Gallery

\n\n# Histogram\n\n直方图是将连续型的数据进行**分组**，归档到（离散的）不同组别中，以实现对**一维数据分布**的可视化。\n\n以下例子展示了美国各县在 2016 年八月份的失业率。数据来源：[劳工统计局 Bureau of Labor Statistics](http://www.bls.gov/lau/#tables)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// 读取 csv 文件并载入其中的数据集作为一个数组\n// 参考 d3-dsv 模块 https://github.com/d3/d3-dsv\n// 每一个数据点都是一个对象\n// 在绘制直方图时，采用对象的 rate 属性值作为分组的依据值\nunemployment = FileAttachment(\"unemployment-x.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"// 📝 该 cell 只是用于演示效果\n// 使用 d3.bin() 将数据集进行分组/装箱，共有 50 个分组\n// 参考 d3-array 模块 https://github.com/d3/d3-array/tree/main#bins 或 https://d3js.org/d3-array/bin#bin\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-process#分组\nbins = d3.bin()\n // 设置分组数量\n // 但实际生成的区间数量并不一定和入参一致\n // D3 会自动调整了分组数量，以提高区间的分割值（刻度值）的可读性\n .thresholds(40) \n // 将数据点的 d.rate 属性设置为分组的依据（而不是整个数据点对象）\n .value((d) => d.rate)\n (unemployment);\n // 该方法最后返回一个数组 bins\n // 数组的每个元素就是一个 bin（区间），它包含了属于该档次的样本数据，因此元素也是一个数组，所以每个元素（内嵌的数组）的长度就是该分组所包含的样本的数量\n // 此外每个 bin 还有两个特殊的属性（数组是对象特殊的对象，除了元素以外，D3 还为每个分组设置了属性）：\n // * x0 表示该分组 bin 的下限（包含）\n // * x1 表示该分组 bin 的上限（不包含，除非它是最后一个区间，则包含上限）","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"// 📝 该 cell 只是用于演示效果\n// 列出第一个分组\n// 它包含 17 个数据点\n// 该分组的下限 x0 是 1.5\n// 该分组的上限 x1 是 2\nbins[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"