Back to Details

cs448b-visualization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CS448B Visualization

CS448B 可视化设计

When to Use Each Reference

各参考文档适用场景

ReferenceUse When
encoding-perception.mdChoosing how to map data to visual properties, or evaluating if encodings are effective
chart-design.mdDeciding which chart type fits the data, or configuring axes/scales
d3-patterns.mdWriting D3.js code for bindings, scales, axes, transitions
interaction-animation.mdAdding brushing, filtering, tooltips, or animated transitions
color.mdSelecting color palettes or ensuring accessibility
networks-text.mdVisualizing graphs, hierarchies, or text/document data
参考文档适用场景
encoding-perception.md选择如何将数据映射到视觉属性，或评估编码是否有效
chart-design.md确定哪种图表类型适配数据，或配置坐标轴/刻度
d3-patterns.md编写D3.js代码实现数据绑定、刻度、坐标轴与过渡效果
interaction-animation.md添加刷选、过滤、提示框或动画过渡效果
color.md选择配色方案或确保可访问性
networks-text.md可视化图结构、层级或文本/文档数据

Critique Checklist

可视化评估检查表

When reviewing any visualization:
  1. Expressiveness - Does it show all the data? Only the data? No misleading elements?
  2. Effectiveness - Is the most important data on the most accurate encoding (position > length > area > color)?
  3. Zero baseline - Do bar charts start at zero?
  4. Accessibility - Works for colorblind viewers (~8% of males)?
  5. Data-ink ratio - Can any non-data elements be removed?
  6. Aspect ratio - Are line charts banked so slopes are ~45°?
评估任何可视化作品时：
  1. 表达性 - 是否完整展示了所有数据？仅展示数据？无误导性元素？
  2. 有效性 - 最重要的数据是否使用了最准确的编码方式（位置 > 长度 > 面积 > 颜色）？
  3. 零基线 - 柱状图是否从零开始？
  4. 可访问性 - 能否适配色盲用户（约8%的男性）？
  5. 数据墨水比 - 是否可以移除任何非数据相关元素？
  6. 宽高比 - 折线图的斜率是否约为45°？

Encoding Decision Order

视觉编码决策优先级

When mapping data fields to visual channels:
  1. Most important quantitative → Position (x or y)
  2. Second quantitative → Position (other axis) or Length
  3. Categories (≤7) → Color hue
  4. Categories (>7) → Position or small multiples
  5. Magnitude/importance → Size (but expect ~30% underestimation)
将数据字段映射到视觉通道时：
  1. 最重要的定量数据 → 位置（X轴或Y轴）
  2. 次重要的定量数据 → 位置（另一轴）或长度
  3. 类别（≤7个）→ 颜色色相
  4. 类别（>7个）→ 位置或小多图
  5. 数值大小/重要性 → 尺寸（注意：用户可能会低估约30%的数值）

Chart Selection Logic

图表选择逻辑

  • One variable, distribution → Histogram
  • One variable, categories → Bar chart
  • Two variables, both quantitative → Scatterplot
  • Two variables, time + quantitative → Line chart
  • Two variables, both categorical → Heatmap
  • Hierarchy → Treemap or node-link tree
  • Network (sparse) → Force-directed layout
  • Network (dense) → Matrix diagram
  • 单变量，分布情况 → 直方图
  • 单变量，类别数据 → 柱状图
  • 双变量，均为定量数据 → 散点图
  • 双变量，时间+定量数据 → 折线图
  • 双变量，均为分类数据 → 热力图
  • 层级结构 → 树图或节点链接树
  • 网络（稀疏） → 力导向布局
  • 网络（密集） → 矩阵图

Animation Decision

动画设计决策

  • Presentation context → Use animation (faster, engaging)
  • Analysis context → Use small multiples (more accurate)
  • State transitions → Animate to maintain object constancy
  • Duration: 200-300ms quick feedback, 500-700ms standard, 1000ms+ complex
  • 演示场景 → 使用动画（更快捷、引人入胜）
  • 分析场景 → 使用小多图（更准确）
  • 状态切换 → 使用动画以保持对象恒常性
  • 时长：200-300ms（快速反馈），500-700ms（标准），1000ms+（复杂场景）