31:T3e2c,chart = { // 设置一些关于尺寸的参数 const width = 928; // svg 元素的宽 const height = 600; // svg 元素的高 // margin 为前缀的参数 // 其作用是在 svg 的外周留白，构建一个显示的安全区，以便在四周显示坐标轴 const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 30; /** * * 构建比例尺 * */ // 设置横坐标轴的比例尺 // 横坐标轴的数据是日期（时间），使用 d3.scaleUtc 构建一个时间比例尺（连续型比例尺的一种） // 该时间比例尺采用协调世界时 UTC，处于不同时区的用户也会显示同样的时间 // 具体可以参考官方文档 https://d3js.org/d3-scale/time // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#时间比例尺-time-scales const x = d3.scaleTime() // 设置定义域范围 // 从数据集的每个数据点中提取出日期（时间），并用 d3.extent() 计算出它的范围 .domain(d3.extent(data, d => d.date)) // 设置值域范围（所映射的可视元素） // svg 元素的宽度（减去留白区域） .range([marginLeft, width - marginRight]); // 设置纵坐标轴的比例尺 // 纵坐标轴的数据是连续型的数值（温度），使用 d3.scaleLinear 构建一个线性比例尺 const y = d3.scaleLinear() // 设置定义域范围 [ymin, ymax] // 其中 ymin 是最低温度，先通过 Math.min(d.value0, d.value1) 对每个数据点进行处理，提取出当天两个城市中较低的值 // 然后通过 d3.min() 从数据集中获取温度的最低值 // 相应地 ymax 就是最高温度 .domain([ d3.min(data, d => Math.min(d.value0, d.value1)), d3.max(data, d => Math.max(d.value0, d.value1)) ]) // 设置值域范围 // svg 元素的高度（减去留白区域） .range([height - marginBottom, marginTop]); // 设置颜色比例尺 // 为不同的面积区域设置不同的颜色，以对应数据的不同（差异）关系 // 只有两种情况：其中一种情况是当天温度纽约高于三藩市；另一种情况是当前温度三藩市高于纽约 // 所以只需要提供两种颜色进行映射对照 // 这里使用 D3 内置的一种配色方案 d3.schemeRdYlBu（它属于 Diverging schemes 离散型的配色方案，用于明显地区分不同的类型） // 它是一个嵌套数组，包含一些预设的配色方案（共 9 种对色谱采样的方式） // 具体可以查看 👇 下面第一个 📝 cell 或参考官方文档 https://d3js.org/d3-scale-chromatic/diverging#schemeRdYlBu // 这里采用第三个配色方案 d3.schemeRdYlBu[3] 它也是一个数组，包含 3 个元素，每个元素都是一个表示颜色的字符串 // 具体可以查看 👇👇 下面第二个 📝 cell // d3.schemeRdYlBu[3][2] 获取一种颜色（#91bfdb 浅蓝色），d3.schemeRdYlBu[3][0] 获取另一种颜色（#fc8d59 橙色），它们分别用于映射对照不同的数据（差异）关系 const colors = [d3.schemeRdYlBu[3][2], d3.schemeRdYlBu[3][0]]; /** * * 创建 svg 容器 * */ // 返回的是一个包含 svg 元素的选择集 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;") // 绑定数据 // 这里采用 selection.datum(value) 为选择集中的每个元素上绑定的数据（该选择集里只有一个

Difference chart

D3 › Gallery

\n\n# Difference chart\n\n差异图\n\n下图显示纽约和三藩市的温度差异；当三藩市的温度更高的日子面积标为橙色，当三藩市的温度更低的日子面积标为蓝色。","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"// 📝 该 cell 只是用于演示效果\n// d3.schemeRdYlBu 是 D3 内置的一种配色方案，具体包含了 9 种对色谱进行采样方式\n// 可以通过 d3.schemeRdYlBu[k] 获取具体的配色方案（⚠️ 注意该数组前三个元素为空，所以 k 的合理取值范围是 3 到 11）\nd3.schemeRdYlBu","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"// 📝 该 cell 只是用于演示效果\nd3.schemeRdYlBu[3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"colors = [d3.schemeRdYlBu[3][2], d3.schemeRdYlBu[3][0]];","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}