Lab 5 · 视觉编码

D3 比例尺是将数据的数学域（domain）映射到视觉范围（range）的函数：

// 连续型比例尺
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([0, width]);

// 带宽比例尺（分类）
const colorScale = d3.scaleBand()
  .domain(['Cat A', 'Cat B', 'Cat C'])
  .range([0, width])
  .padding(0.1);

位置是最强的视觉通道。x 轴和 y 轴分别编码一个数据维度：

const xScale = d3.scaleBand()
  .domain(data.map(d => d.category))
  .range([0, width]).padding(0.05);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([height, 0]); // SVG y轴向下，所以反转

svg.append('g')
  .attr('transform', `translate(0,${height})`)
  .call(d3.axisBottom(xScale));

svg.append('g')
  .call(d3.axisLeft(yScale));

颜色编码分为色相（分类区分）和饱和度/明度（数值大小）：

// 分类颜色（色相不同）
const catColor = d3.scaleOrdinal()
  .domain(['A', 'B', 'C'])
  .range(d3.schemeTableau10);

// 连续颜色（数值大小 → 颜色深浅）
const numColor = d3.scaleSequential()
  .domain([minVal, maxVal])
  .interpolator(d3.interpolateBlues);

// 分段颜色（数值 → 离散色阶）
const quantColor = d3.scaleQuantize()
  .domain([0, 100])
  .range(['#fee5d9', '#fcae91', '#fb6a4a', '#cb181d']);

尺寸（大小）和透明度适合编码次要信息：

// 尺寸编码（面积与数据成正比，而非半径）
const rScale = d3.scaleSqrt()
  .domain([0, maxVal])
  .range([2, 20]);

// 透明度编码（适合展示重叠/密度）
const opacityScale = d3.scaleLinear()
  .domain([0, maxVal])
  .range([0.2, 0.9]);

在实验报告中填写完整的视觉编码表：

| 数据字段 | 数据类型 | 视觉通道 | D3 方法 |

| category | 分类 | 颜色 | d3.scaleOrdinal |

| value | 连续 | 纵轴位置 | d3.scaleLinear |

| count | 连续 | 圆半径 | d3.scaleSqrt |