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 從公開儲存庫中收錄這些內容。

檢舉或申請下架