Data Visualization

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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`.

Instructions onlyData & Analytics
AI-generated overview

Guides chart type selection and data encoding design, including axes, labels, color use, and accessible styling.

What it does
This skill provides guidance for choosing chart types based on the communication goal, such as comparison, trend over time, part of whole, distribution, and relationship. It covers design principles like data-ink ratio, axis labeling, and annotation, plus color encoding schemes and accessibility practices. It also addresses responsive visualization and general best practices. It produces design guidance rather than files or code.
When to use it
Use it when presenting data graphically and needing to decide which chart type or encoding fits the message. It is suited to situations where clarity, accessibility, and responsive behavior of charts matter.
Requirements
No tools, packages, or credentials are required; it is instructions only and ships no scripts.

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

Source and attribution

Source:owl-listener/designer-skillsinui-design/skills/data-visualizationat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal