2a:null 2b:["$","title",null,{"children":"Threshold encoding | Benbinbin | Observable"}] 30:T13de,chart = { // 设置一些关于尺寸的参数 const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; /** * * 构建比例尺 * */ // 设置横坐标轴的比例尺 const x = d3.scaleUtc() .domain(d3.extent(temperatures, d => d.date)) .range([marginLeft, width - marginRight]); // 设置纵坐标轴的比例尺 const y = d3.scaleLinear() .domain(d3.extent(temperatures, d => d.temperature)).nice() .range([height - marginBottom, marginTop]); // 💡 计算数据集 temperatures 中所有温度值的中位数，以其作为阈值 const threshold = d3.median(temperatures, d => d.temperature); /** * * 创建 svg 容器 * */ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); /** * * 绘制坐标轴 * */ // 绘制横坐标轴 svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); // 绘制纵坐标轴 svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) // 💡 为纵坐标轴添加注释（温度的单位标记） // 拷贝最后一个刻度（通过 class 选择器 .tick:last-of-type）里面的 `` 标签 .call(g => g.select(".tick:last-of-type text").clone() // 调整定位，水平向右偏移 3px .attr("x", 3) // 设置文本对齐方式 .attr("text-anchor", "start") // 设置字体样式为加粗 .attr("font-weight", "bold") // 设置/覆写文本内容 .text("°F")); /** * * 创建线性渐变色 * */ // 使用 Observable 平台的标准库所提供的方法 DOM.uid(namespace) 创建一个唯一 ID 号 // 具体参考 https://observablehq.com/@observablehq/stdlib#cell-790 // 用作元素的 id 属性值 const gradient = DOM.uid(); // 使用 svg 元素定义线性渐变色，用于图形元素的填充或描边 svg.append("linearGradient") .attr("id", gradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) // 渐变色的起始点的横坐标 .attr("y1", 0) // 渐变色的起始点的纵坐标 .attr("x2", 0) // 渐变色的终止点的横坐标 .attr("y2", height) // 渐变色的终止点的纵坐标 // 这里设置起始点和终止点的横坐标都是 0，由于渐变色是沿纵坐标轴变化的（以显示温度的变化），所以横坐标采用 0 即可 // ⚠️ 注意 svg 的坐标体系中向下是正方向，所以渐变色的起始点 (0, 0) 是在 y 轴的顶部，终止点 (0, height) 是在 y 轴的底部 // 进行二次选择，在元素内添加一系列的元素，以切换渐变色 .selectAll("stop") // 绑定数据 // 手动构建出一个数组，每个元素都是一个对象，其中包含了属性 offset（偏移量）和属性 color（对应的颜色） // 其中第一个元素的偏移量是一个百分比 y(threshold) / height 即中位数相对于 y 轴的位置，颜色是红色 // 而第二个元素的偏移量是一样的，也是 y(threshold) / height 中位数相对于 y 轴的位置，颜色是黑色的 .data([ {offset: y(threshold) / height, color: "red"}, {offset: y(threshold) / height, color: "black"} ]) // 将一系列的元素添加到元素里 .join("stop") .attr("offset", d => d.offset) // 设置 offset 偏移量 .attr("stop-color", d => d.color); // 设置 stop-color 颜色值 // 根据以上手动构建的数组，可以知道会对应生成两个元素 // ⚠️ 因为 svg 的坐标体系中向下是正方向，渐变色的起始点是 (0, 0) 终止点是 (0, hiehgt) // 所以从起始点到第一个所设置的偏移量的位置（y 轴的中间）为止，这一个范围的线段都是红色 // 由于第二个所设置的偏移量和第一个的偏移量一样，所以从 y 轴的中间位置到 y 轴底部，这一个范围的线段都是黑色 /** * * 绘制折线图内的线段 * */ // 使用方法 d3.line() 创建一个线段生成器 const line = d3.line() .curve(d3.curveStep) .defined(d => !isNaN(d.temperature)) .x(d => x(d.date)) .y(d => y(d.temperature)); // 将线段路径绘制到页面上 svg.append("path") .datum(temperatures) .attr("fill", "none") .attr("stroke", gradient) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); return svg.node(); }31:[{"id":"9a14470ba5e0af46cf088ab46c9668850837be8d09b914f2a50977cc2a8d110a695b1337825641fa0d75242d88f803b75805eee2ef2e7878fc74a1cb1ce4b606","href":"https://static.observableusercontent.com/files/9a14470ba5e0af46cf088ab46c9668850837be8d09b914f2a50977cc2a8d110a695b1337825641fa0d75242d88f803b75805eee2ef2e7878fc74a1cb1ce4b606","name":"temperature.csv","type":"application/octet-stream","lastModified":1695627942472.321,"size":5873}] 2e:{"id":"a7e3b1866a9c2266","slug":"threshold-encoding","title":"Threshold encoding","thumbnail":"75d8df0546981b165a6dc1ac16e09a74fea48fdf2897209825ecf176b1f90317","access_level":"public","create_time":"$D2023-09-25T07:45:42.472Z","update_time":"$D2023-09-26T11:19:44.663Z","view_time":null,"first_public_time":"$D2023-09-25T07:45:42.472Z","has_unpublished_edits":null,"fork":{"id":"9470740be73a1fec","slug":"threshold-encoding","title":"Threshold encoding","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":340,"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":"6c390362bd6d229e","reply_to_id":null,"content":"📢 由于该折线图和另一个渐变色折线图使用相同的数据集，而且在代码上大部分都是相同的，只是所创建线性渐变色有所不同\n\n所以这个 Notebook 只针对其中 💡 变化的部分进行标注，可以结合另一个渐变色折线图 https://observablehq.com/@benbinbin/gradient-encoding 对照着看，就可以得出逐行代码注释","create_time":"$D2023-09-25T09:55:33.387Z","update_time":null,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f94d12fc57537f9f","slug":"line-chart","title":"Line Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"titling":"auto","title":"Threshold encoding","cells":[{"id":1,"value":"

Threshold encoding

D3 › Gallery

\n\n# Threshold encoding\n\n阈值二色折线图\n\n这是[静态折线图](/@d3/line-chart)的变体，线段的颜色基于其 *y 值*与一个 threshold 阈值/临界值的大小关系，而编码不同的颜色。\n\n当 y 值大于数据集的中位数，线段为红色；当 y 值小于数据集的中位数，线段为黑色","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// 读取数据，并将字符串自动解析转换为相应的数据类型\ntemperatures = FileAttachment(\"temperature.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"