2b:null 2c:["$","title",null,{"children":"Connected scatterplot | Benbinbin | Observable"}] 31:T35e1,chart = { replay; // 设置一些关于尺寸的参数 const width = 928; // svg 元素的宽 const height = 720; // svg 元素的高 // margin 为前缀的参数 // 其作用是在 svg 的外周留白，构建一个显示的安全区，以便在四周显示坐标轴 const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; /** * * 构建比例尺 * */ // 设置横坐标轴的比例尺 // 横坐标轴的数据是连续型的数值（人均每年驾驶英里数），使用 d3.scaleLinear 构建一个线性比例尺 const x = d3.scaleLinear() // 设置定义域范围 // 从数据集的每个数据点中提取出英里数 d.miles，并用 d3.extent() 计算出这些数据的范围 // 另外还使用 continuous.nice() 方法编辑定义域的范围，通过四舍五入使其两端的值更「整齐」 nice（便于划分刻度） // 具体参考官方文档 https://d3js.org/d3-scale/linear#linear_nice .domain(d3.extent(driving, d => d.miles)).nice() // 设置值域范围（所映射的可视元素） // svg 元素的宽度（减去留白区域） .range([marginLeft, width - marginRight]); // 设置纵坐标轴的比例尺 // 纵坐标轴的数据是连续型的数值（每加仑油价），使用 d3.scaleLinear 构建一个线性比例尺 const y = d3.scaleLinear() // 设置定义域范围 // 从数据集的每个数据点中提取出油价值 d.gas，并用 d3.extent() 计算出这些数据的范围 // 另外还使用 continuous.nice() 方法编辑定义域的范围，通过四舍五入使其两端的值更「整齐」 nice（便于划分刻度） .domain(d3.extent(driving, d => d.gas)).nice() // 设置值域范围（所映射的可视元素） // svg 元素的高度（减去留白区域） .range([height - marginBottom, marginTop]); /** * * 创建 svg 容器 * */ // 返回的是一个包含 svg 元素的选择集 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); /** * * 绘制坐标轴 * */ // 绘制横坐标轴 svg.append("g") // 通过设置 CSS 的 transform 属性将横坐标轴容器「移动」到底部 .attr("transform", `translate(0,${height - marginBottom})`) // 横轴是一个刻度值朝下的坐标轴 // 通过 axis.ticks(count) 设置刻度数量的参考值（避免刻度过多导致刻度值重叠而影响图表的可读性） .call(d3.axisBottom(x).ticks(width / 80)) // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名） .call(g => g.select(".domain").remove()) // 复制了一份刻度线，用以绘制图中纵向的网格参考线 .call(g => g.selectAll(".tick line").clone() // 调整复制后的刻度线的终点位置（往上移动） .attr("y2", -height) .attr("stroke-opacity", 0.1)) // 调小参考线的透明度 // 为坐标轴添加额外信息名称（一般是刻度值的单位等信息） .call(g => g.append("text") // 将该文本移动到坐标轴的一端（即 svg 的右下角） .attr("x", width - 4) .attr("y", -4) .attr("font-weight", "bold") // 设置字体粗细 .attr("text-anchor", "end") // 设置文本的对齐方式 .attr("fill", "currentColor") // 设置文本的颜色 .text("Miles per person per year")); // 设置文本内容 // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法） // 会将选择集中的元素传递给坐标轴对象的方法，作为第一个参数 // 以便将坐标轴在相应容器内部渲染出来 // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法 // 绘制纵坐标轴 svg.append("g") // 通过设置 CSS 的 transform 属性将纵向坐标轴容器「移动」到左侧 .attr("transform", `translate(${marginLeft},0)`) // 纵轴是一个刻度值朝左的坐标轴 // 并使用坐标轴对象的方法 axis.ticks() 设置坐标轴的刻度数量和刻度值格式 // 具体参考官方文档 https://d3js.org/d3-axis#axis_ticks // 其中第一个参数用于设置刻度数量，这里设置为 `null` 表示采用默认的刻度生成器 // 而第二个参数用于设置刻度值格式，这里设置为 "$.2f" 表示将数值保留两位小数，并在前面添加金钱符号 $ // 关于 D3 所提供的数值格式具体参考官方文档 https://d3js.org/d3-format .call(d3.axisLeft(y).ticks(null, "$.2f")) // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名） .call(g => g.select(".domain").remove()) // 复制了一份刻度线，用以绘制图中横向的网格参考线 .call(g => g.selectAll(".tick line").clone() .attr("x2", width) // 调整复制后的刻度线的终点位置（往右移动） .attr("stroke-opacity", 0.1)) // 调小参考线的透明度 // 为坐标轴添加额外信息名称（一般是刻度值的单位等信息） // 这里并没有添加一个元素 // 而是复制坐标轴的最后一个刻度（通过 class 选择器 .tick:last-of-type）里面的 `` 标签 // 再调整其位置，并设置内容 .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) // 将文本向右边设置一点小偏移 .attr("text-anchor", "start") // 设置文本的对齐方式 .attr("font-weight", "bold") // 设置字体粗细 .text("Cost per gallon")); // 设置文本内容 /** * * 绘制折线图内的线段 * */ // 使用方法 d3.line() 创建一个线段生成器 // 线段生成器会基于给定的坐标点生成线段（或曲线） // 具体可以参考官方文档 https://d3js.org/d3-shape/line // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#线段生成器-lines const line = d3.line() // 设置两点之间的曲线插值器（所以线段生成器除了可以绘制折线，还可以绘制曲线） // D3 提供了一系列的内置的曲线插值器，它们的区别和具体效果可以查看官方文档 https://d3js.org/d3-shape/curve // 这里就是使用了其中一个 d3.curveCatmullRom .curve(d3.curveCatmullRom) // 设置横坐标读取函数 // 该函数会在调用线段生成器时，为数组中的每一个元素都执行一次，以返回该数据所对应的横坐标 // 这里基于每个数据点的英里数 d.miles 并采用比例尺 x 进行映射，计算出相应的横坐标 .x(d => x(d.miles)) // 设置纵坐标读取函数 .y(d => y(d.gas)); // 调用线段生成器 line(driving) 返回的结果是字符串，该值作为 `` 元素的属性 `d` 的值 // 使用 length() 方法获取该路径的总长度 const l = length(line(driving)); // 将线段路径绘制到页面上 svg.append("path") // 绑定数据 // 这里采用 selection.datum(value) 为选择集中的每个元素上绑定的数据（该选择集里只有一个元素） // 因为这里只需要使用一个元素来绘制一条路径，作为折线/曲线 // ⚠️ 它与 selection.data(value) 不同，该方法不会将数组进行「拆解」 // 即这个方法不会进行数据与元素的一一对应链接计算,并且不影响索引，不影响（不产生）enter 和 exit 选择集 // 而是将数据 value 作为一个整体绑定到选择的各个元素上，因此使用该方法选择集的所有 DOM 元素绑定的数据都一样 // 具体参考官方文档 https://d3js.org/d3-selection/joining#selection_datum // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/module-api/d3-module-selection#绑定数据 .datum(driving) // 只需要路径的描边作为折线，不需要填充，所以属性 fill 设置为 none .attr("fill", "none") // 设置描边颜色 .attr("stroke", "black") // 设置描边宽度 .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") // 设置折线之间的连接样式（圆角让连接更加平滑） .attr("stroke-linecap", "round") // 设置路径端点的样式 // 通过属性 stroke-dasharray 设置路径（描边）的**点划线**的图案规则，作为路径展开动画的初始状态 // 该属性值由一个或多个（用逗号或者空白隔开）数字构成 // 这些数字组合会依次表示划线和缺口的长度 // 即第一个数字表示划线的长度，第二个数表示缺口的长度，然后下一个数字又是划线的长度，依此类推 // 如果该属性值的数字之和小于路径长度，则重复这个数字来绘制划线和缺口，这样就会出现规律的点划线图案 // 这里首先将属性 stroke-dasharray 设置为 `0,${l}` // 即路径的划线部分为 0，全部都是缺口 // 所以其效果是在过渡开始时，路径为空，即折线不可见 .attr("stroke-dasharray", `0,${l}`) // 调用线段生成器，将所绑定的数据 driving 作为参数传递到方法 line() 中 // 返回的结果是字符串，作为 `` 元素的属性 `d` 的值 .attr("d", line) // 设置过渡动效 // 更改的属性是 stroke-dasharray .transition() .duration(5000) // 设置过渡的时间 .ease(d3.easeLinear) // 设置缓动函数 // 设置属性是 stroke-dasharray 过渡的最终状态 `${l},${l}`（其实也可以是 `${l},0` 最终效果一样） // 即路径的划线的长度和路径总长度相同，缺口也一样 // 所以效果是过渡结束时，路径完全显示 .attr("stroke-dasharray", `${l},${l}`); /** * * 绘制数据点 * */ svg.append("g") .attr("fill", "white") // 填充色为白色 .attr("stroke", "black") // 描边为黑色 .attr("stroke-width", 2) // 描边宽度 // 使用元素（一个个小圆形）来绘制数据点 .selectAll("circle") .data(driving) // 绑定数据 .join("circle") // 定位各数据点 .attr("cx", d => x(d.miles)) .attr("cy", d => y(d.gas)) .attr("r", 3); // 设置圆的半径大小 /** * * 为数据点添加标注 * */ const label = svg.append("g") // 设置字体样式 .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll() // 绑定数据 .data(driving) // 使用元素显式标注 .join("text") // 使用 CSS 的属性 transform 将各个元素定位到相应数据点的位置 .attr("transform", d => `translate(${x(d.miles)},${y(d.gas)})`) .attr("fill-opacity", 0) // 设置透明状态，初始值为 0%，即一开始是隐藏的 .text(d => d.year) // 设置文本内容 // 设置文字的描边颜色为白色 .attr("stroke", "white") // 设置文本的 fill 填充、stroke 描边、mark 标记的绘制顺序 // 这里是先绘制描边，然后再是填充，避免白色描边遮挡了黑色的字体 // 具体介绍查看 https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order .attr("paint-order", "stroke") // 设置文字颜色 .attr("fill", "currentColor") // 使用方法 selection.each(func) 让选择集中的每个元素都调用一次函数 func 以执行特定的操作 // 这里的作用是根据各个数据点的属性 side 来设置文本的偏移值（避免文本标注遮挡折线） // d 是当前所遍历的元素所绑定的数据 .each(function(d) { // this 指向当前所遍历的 DOM 元素 const t = d3.select(this); // 根据数据点的属性 d.side 的值来设置标注文本的对齐方式和偏离量 switch (d.side) { case "top": t.attr("text-anchor", "middle").attr("dy", "-0.7em"); break; case "right": t.attr("dx", "0.5em").attr("dy", "0.32em").attr("text-anchor", "start"); break; case "bottom": t.attr("text-anchor", "middle").attr("dy", "1.4em"); break; case "left": t.attr("dx", "-0.5em").attr("dy", "0.32em").attr("text-anchor", "end"); break; } }); // 为标注信息设置透明度的过渡动效 label.transition() // 为各个标注信息设置**不同**的延迟时间 // 以实现标注信息的显式和路径的展开达到同步的效果 // 参数 d 是当前所遍历的元素所绑定的数据，参数 i 是当前所遍历的元素在分组中的索引 // 通过方法 line(driving.slice(0, i + 1)) 获取当前标注文本所对应的数据点，所在的路径 // 然后再通过 length() 计算该路径的长度 // 通过与总长度 l 相除得到相对值，用于计算需要延迟多长时间（路径正好延伸到该数据点） // duration - 125 做了一些小修正，在路径展开到来前，让标注信息提前一点点时间先显示 .delay((d, i) => length(line(driving.slice(0, i + 1))) / l * (5000 - 125)) .attr("fill-opacity", 1); // 设置透明度在过渡的最终状态为 1，即完全显示 return svg.node(); }32:[{"id":"ee06c4a8d8043694d6cd5b884965b71db08aaa7cb4812f88d9c28990634cc013575274525781f41b5274158bc683a6657cb35026b291098a62bfbea380c250d3","href":"https://static.observableusercontent.com/files/ee06c4a8d8043694d6cd5b884965b71db08aaa7cb4812f88d9c28990634cc013575274525781f41b5274158bc683a6657cb35026b291098a62bfbea380c250d3","name":"driving.csv","type":"application/octet-stream","lastModified":1702868178834.282,"size":1546},{"id":"42832d02e807f84d73a68437d468cfe9b91dc9d04572c8cf82e1adfcf4cf096d14bc71744ce51723c95cb2401db5e672d48e3380206892a6199df6abcedf1bc0","href":"https://static.observableusercontent.com/files/42832d02e807f84d73a68437d468cfe9b91dc9d04572c8cf82e1adfcf4cf096d14bc71744ce51723c95cb2401db5e672d48e3380206892a6199df6abcedf1bc0","name":"02metrics-popup-v3.jpg","type":"image/jpeg","lastModified":1702871207323.619,"size":318423}] 2f:{"id":"c365b7b260bf7372","slug":"connected-scatterplot","title":"Connected scatterplot","thumbnail":"e744f0595f9894f617145cf550ff9b3106cc33d24996ff8f2074fe8ae334c446","access_level":"public","create_time":"$D2023-12-18T02:56:18.834Z","update_time":"$D2023-12-19T07:45:03.275Z","view_time":null,"first_public_time":"$D2023-12-18T02:56:18.834Z","fork":{"id":"8fc3faefbbd73413","slug":"connected-scatterplot/2","title":"Connected scatterplot","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"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":411,"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":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[{"id":"ba6cb789ef7ee92b","reply_to_id":null,"content":"原图描绘了每加仑汽油价格和人均驾驶英里数之间的关系，图中标注了「阿拉伯石油禁运」、「能源危机」和「历史最低油价」等重大事件如何影响这些指标。\n\n经济学家长期研究的驾驶习惯与经济活动之间的关系。驾驶的增加通常对应着商业活动的增加，而减少则发生在经济低迷时期。但是在原折线的最后部分（见下图，2010 年附近），尽管经济产出已经反弹，但是美国人的驾驶量却比经济衰退开始前（2005 年）还少，这表明高油价或消费者偏好的变化可能正在影响我们对驾驶的热爱，所以该图的标题被命名为 \"Driving Shifts Into Reverse\"\n\n可以参考另一个 notebook https://observablehq.com/@benbinbin/scatterplot-connected 它绘制的图是一样的，但是对代码进行了更高度的封装，便于复用","create_time":"$D2023-12-18T03:46:30.829Z","update_time":"$D2023-12-19T06:52:15.734Z","resolved":false,"user":{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"f94d12fc57537f9f","slug":"line-chart","title":"Line Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Connected scatterplot","cells":[{"id":0,"value":"

Connected scatterplot

D3 › Gallery

\n\n# Connected scatterplot\n\n连接数据点（成为折线图）的动效\n\n这是对 Hannah Fairfield 的*[驾驶习惯改变](http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html)*的折线图重制复现（不带注解）\n\n还有一些类似的例子可以参考：\n\n* [*Driving Safety, in Fits and Starts*](http://www.nytimes.com/interactive/2012/09/17/science/driving-safety-in-fits-and-starts.html)\n* [Noah Veltman’s variation](https://bl.ocks.org/veltman/87596f5a256079b95eb9)\n* [a paper on connected scatterplots](http://steveharoz.com/research/connected_scatterplot/) by Haroz *et al.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":376,"value":"FileAttachment(\"02metrics-popup-v3.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"// 读取数据，并将字符串自动解析转换为相应的数据类型\ndriving = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"*length* 是一个 helper function 工具函数，用于计算 *path* 路径（折线/曲线的总长度），它会被用于实现 transition 过渡动效（基于属性 `stroke-dasharray`）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":163,"value":"// 计算曲线的总长度\n// 传入的参数是一个字符串（它作为元素的属性 `d` 的属性值，由线段生成器所生成）\n// 首先使用 d3.create(svg:path) 创建一个选择集，其中包含一个新建的 SVG 元素\n// ⚠️ 如果创建的不是 HTML 元素（例如 `