Loading...

Back to Details

cs448b-visualization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CS448B Visualization

CS448B 可视化设计

When to Use Each Reference

各参考文档适用场景

Reference	Use When
encoding-perception.md	Choosing how to map data to visual properties, or evaluating if encodings are effective
chart-design.md	Deciding which chart type fits the data, or configuring axes/scales
d3-patterns.md	Writing D3.js code for bindings, scales, axes, transitions
interaction-animation.md	Adding brushing, filtering, tooltips, or animated transitions
color.md	Selecting color palettes or ensuring accessibility
networks-text.md	Visualizing 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:

Expressiveness - Does it show all the data? Only the data? No misleading elements?
Effectiveness - Is the most important data on the most accurate encoding (position > length > area > color)?
Zero baseline - Do bar charts start at zero?
Accessibility - Works for colorblind viewers (~8% of males)?
Data-ink ratio - Can any non-data elements be removed?
Aspect ratio - Are line charts banked so slopes are ~45°?

评估任何可视化作品时：

表达性 - 是否完整展示了所有数据？仅展示数据？无误导性元素？
有效性 - 最重要的数据是否使用了最准确的编码方式（位置 > 长度 > 面积 > 颜色）？
零基线 - 柱状图是否从零开始？
可访问性 - 能否适配色盲用户（约8%的男性）？
数据墨水比 - 是否可以移除任何非数据相关元素？
宽高比 - 折线图的斜率是否约为45°？

Encoding Decision Order

视觉编码决策优先级

When mapping data fields to visual channels:

Most important quantitative → Position (x or y)
Second quantitative → Position (other axis) or Length
Categories (≤7) → Color hue
Categories (>7) → Position or small multiples
Magnitude/importance → Size (but expect ~30% underestimation)

将数据字段映射到视觉通道时：

最重要的定量数据 → 位置（X轴或Y轴）
次重要的定量数据 → 位置（另一轴）或长度
类别（≤7个）→ 颜色色相
类别（>7个）→ 位置或小多图
数值大小/重要性 → 尺寸（注意：用户可能会低估约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+（复杂场景）