2b:null 2c:["$","title",null,{"children":"Donut multiples | Benbinbin | Observable"}] 31:T344c,chart = { /** * * 构建比例尺 * */ // 设置颜色比例尺 // 为环形图的不同扇形区域设置不同的配色 // 使用 d3.scaleOrdinal() 排序比例尺 Ordinal Scales 将离散型的定义域映射到离散型值域 // 具体参考官方文档 https://d3js.org/d3-scale/ordinal // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#排序比例尺-ordinal-scales const color = d3.scaleOrdinal() // 设置定义域范围 // 各扇形所表示的年龄段，即 7 种年龄段 .domain(data.columns.slice(1)) // 设置值域范围，对应 7 种颜色值 .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); /** * * 对数据进行转换 * */ // Create the pie layout and arc generator. // 使用 d3.pie() 创建一个 pie 饼图角度生成器 // 饼图角度生成器会基于给定的数据，计算各数据项所对应的扇形在饼图中所占的角度 // 调用饼图角度生成器时返回的结果是一个数组，它的长度和入参的数组长度一致，元素的次序也一样，其中每个元素（是一个对象）依次对应一个数据项，并包含以下属性： // * data 数据项的值 // * value 一个数值，它代表了该数据项，被用于在 Pie 饼图生成器里进行运算（以计算该数据项所需占据的角度） // * index 数据项的索引，从 0 开始 // * starAngle 该数据项在扇形或环形中所对应的起始角 // * endAngle 该数据项在扇形或环形中所对应的结束角 // * padAngle 扇形或环形的间隔角度 // 具体可以参考官方文档 https://d3js.org/d3-shape/pie // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#pies-饼图角度生成器 const pie = d3.pie() // 设置数据项的排序对比函数（用于决定相应扇形的优先次序） // 💡 此处所说的排序，实际上体现在各数据项所对应的扇形的起始角度和结束角度上，而不会改变数组中的元素的次序（经过排序后返回的数组的元素次序，和数据表中数据项的顺序是相同的） // 虽然数据项的排序对比函数默认值就是 `null`，但是这里依然显式地将对比函数设置为 null // 这是为了让 D3 隐式地调用 `pie.sortValues(null)` 将数据项转换值的对比函数设置为 `null`（它的默认值是 `d3.descending` 降序排列），以忽略按数据项的转换值进角度排序 // 如果 `pie.sort` 数据项的对比函数，以及 `pie.sortValues` 它的转换值的对比函数都是 `null`，则各扇形的排序与原始数据集中各数据项顺序一致 // 所以最终各扇形是按照相应的数据项在原始数据集中的顺序进行排序（即年龄段从小到大进行排序） .sort(null) .padAngle(0.02) // 设置环形图里各个扇形之间的间隔角度 // 设置 value accessor 数据访问器/读取函数，即每个数据项经过该函数的转换后，再传递给 Pie 饼图角度生成器 // 数据读取函数的逻辑要如何写，和后面 👇👇 调用饼图角度生成器时，所传入的数据格式紧密相关 // 在后面绘制环状扇形时，向饼图角度生成器所传递的数组是表示某个州的各个年龄段的人口数量 // 则在迭代时数据点 d 是一个对象 {age: string, population: number}（表示某个州的特定年龄段的人口数量） // 这里获取获取人口数量 d.population .value((d) => d.population); /** * * 创建图例 * ⚠️ 但以下代码似乎有问题，在页面并没有成功渲染显示出来 * ☝️ 在前一个 cell 使用另一种方法来创建图例 * */ // // const legend = d3.select("body").append("svg") // .attr("class", "legend") // .attr("width", 120) // .attr("height", (data.columns.length - 1) * 20) // .selectAll("g") // .data(data.columns.slice(1).reverse()) // .enter().append("g") // .attr("transform", (d, i) => `translate(0,${i * 20})`); // legend.append("rect") // .attr("width", 18) // .attr("height", 18) // .style("fill", color); // legend.append("text") // .attr("x", 24) // .attr("y", 9) // .attr("dy", ".35em") // .text((d) => d); /** * * 绘制环形图 * 每个环形图都使用单独的一个

作为最外层容器，包裹一系列的元素里 // 其中每一条样式规则的作用： // * `.pie` 用于设置每个环形图之间的留白间距 // * `.label` 和 `.label-name` 用于设置标注的文本样式 wrapper.append("style").text(` .pie {margin: 4px;} .legend {vertical-align: top;} .label {font: 10px sans-serif;text-anchor: middle;} .label-name {font-weight: bold;} `); // return wrapper.node(); // Return the chart with the color scale as a property (for the legend). return Object.assign(wrapper.node(), {scales: {color}}); }32:T701,// 读取 csv 文件，并进行转换处理 data = FileAttachment("state-age.csv") .csv() .then((data) => { // console.log(data) // 解析所得的可迭代对象（数组）具有属性 columns // 该属性的值是一个数组，元素分别是原数据的列属性（即原来二维数据表的表头信息） // 这里使用 JS 数组的原生方法 array.slice(1) 从第二个元素开始（包含所有年龄段）将其拷贝一份，用于后面的数据转换 const columns = data.columns.slice(1); // 遍历每个元素 // 然后对当前所遍历的元素 data[i] 进行修改，将其替换为一个对象 {state: string, sum: number, ages: array} // 该对象各属性的含义： // * 属性 state 是当前所遍历的数据点所属的州的名称，采用当前所遍历元素的属性 d.state // * 属性 sum 是该州的总人数，通过 d3.sum(array, accessor) 进行求和 // 其中第一个参数 columns 是一个数组，包含所有年龄段 // 而第二个参数是 accessor 数据访问器 (key) => +d[key] 对于每一个年龄段 key，从当前数据点 d 读取出该州相应年龄段的人数（并转换为数值）+d[key] // 最后进行求和就得到该州的总人口数量 // * 属性 ages 是一个数组，包含该州具体各个年龄段的人口数量 // 基于 columns 数值采用 JS 数组的原生方法 array.map() 进行转换而得 // 它的每个元素都是一个对象 {age: string, population: number} 表示年龄段为 key 的人口数量 +d[key] data.forEach((d, i) => data[i] = ({ state: d.State, sum: d3.sum(columns, (key) => +d[key]), ages: columns.map((key) => ({ age: key, population: +d[key] })) })); return data; })33:[{"id":"3a2699bc29a3d45912d4c038d256b81e14688517bcdea6ae8abec556a65e5803473cbfbde94fd6c20bed79a2be764df222886564bb2e84e2fc899e9c15132694","href":"https://static.observableusercontent.com/files/3a2699bc29a3d45912d4c038d256b81e14688517bcdea6ae8abec556a65e5803473cbfbde94fd6c20bed79a2be764df222886564bb2e84e2fc899e9c15132694","name":"state-age.csv","type":"text/csv","lastModified":1728811801034.57,"size":2807}] 2f:{"id":"c2292f20b0494b92","slug":"donut-multiples","title":"Donut multiples","thumbnail":"a7af6bf95baa0e99be53faf5f2f7d418354afac6cac8a44be271e38a8f9cb651","access_level":"public","create_time":"$D2024-10-13T09:30:01.034Z","update_time":"$D2024-10-22T08:18:40.141Z","view_time":null,"first_public_time":"$D2024-10-13T09:30:13.465Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024"},"version":175,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}],"members":[{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"fc0b65452081ab53","slug":"pie-chart","title":"Pie Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Donut multiples","cells":[{"id":3,"value":"# Donut multiples\n环形图矩阵\n\n这些环形图是根据美国各州不同年龄段人口数据（来自附件的 CSV 文件）构建而成的。\n\n从实用角度来看，[标准化的堆叠条形图](/@benbinbin/stacked-bar-chart-normalized)可以更有利于读者进行数据比较（所以推荐采用这种可视化形式，而不是当前的示例）\n\n也可以查看另一个类似的示例：[面积不同的环形图矩阵](/@benbinbin/sized-donut-multiples)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":99,"value":"// 采用官方 @d3 在该平台创建的函数 legend，渲染一个图例\n// 该函数的具体介绍可以参考 https://observablehq.com/@d3/color-legend\nswatches({color: chart.scales.color});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"