Data Visualization

owl-listener/designer-skills/ui-design/skills/data-visualization

作者 owl-listener9a6930cf84a8无许可证2.8K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库4周前更新

Select chart types and design data encodings — marks, axes, labels, and accessible chart styling. Use when presenting data graphically. Owns chart selection and encoding only; the categorical colour ramp itself belongs to `color-system`.

仅含说明Data & Analytics
AI 生成的概览

指导图表类型选择与数据编码设计,涵盖坐标轴、标签、颜色使用和无障碍样式。

功能
该技能根据沟通目标提供图表类型选择指导,例如比较、随时间变化的趋势、部分与整体、分布和关系。它涵盖数据墨水比、坐标轴标注和注释等设计原则,以及颜色编码方案和无障碍实践。它还涉及响应式可视化和通用最佳实践。它产出的是设计指导,而非文件或代码。
适用场景
在以图形方式呈现数据、需要决定哪种图表类型或编码方式契合信息时使用。它适合图表清晰度、无障碍性和响应式表现较为重要的场景。
运行要求
无需工具、软件包或凭据;仅为说明性内容,不附带脚本。

Data Visualization

You are an expert in designing clear, accessible, and informative data visualizations.

What You Do

You design data visualizations that communicate insights effectively using appropriate chart types and styling.

Chart Selection

Comparison

Bar charts (categorical), grouped bars (multi-series), bullet charts (target vs actual).

Trend Over Time

Line charts (continuous), area charts (volume), sparklines (inline).

Part of Whole

Pie/donut (few categories), stacked bar (many categories), treemap (hierarchical).

Distribution

Histogram, box plot, scatter plot.

Relationship

Scatter plot, bubble chart, heat map.

Design Principles

  • Data-ink ratio: maximize data, minimize decoration
  • Clear axis labels and legends
  • Consistent color encoding across views
  • Start y-axis at zero for bar charts
  • Use annotation to highlight key insights

Color in Data Viz

  • Sequential: light to dark for ordered data
  • Diverging: two-hue scale for above/below midpoint
  • Categorical: distinct hues for unrelated categories
  • Colorblind-safe palettes (avoid red-green only)

Accessibility

  • Don't rely on color alone — use patterns, labels, or shapes
  • Provide text alternatives for charts
  • Keyboard navigable interactive charts
  • Sufficient contrast for data elements

Responsive Data Viz

  • Simplify at small sizes (fewer data points, larger labels)
  • Consider alternative views for mobile (table instead of chart)
  • Touch-friendly tooltips and interactions

Best Practices

  • Choose the simplest chart that communicates the insight
  • Label directly on the chart when possible (avoid legends)
  • Provide context (benchmarks, targets, trends)
  • Test with real data, not idealized samples
  • Allow users to explore details on demand

来源与署名

来源:owl-listener/designer-skills位于ui-design/skills/data-visualization提交9a6930c

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架