data-visualization
owl-listener/designer-skills
Select chart types and design accessible data encodings for clear, insightful visualizations.
What is data-visualization?
Expert guidance on choosing appropriate chart types and designing data encodings—marks, axes, labels, and accessible styling. Use when presenting data graphically to ensure your visualizations communicate insights effectively and remain accessible to all users.
- Select optimal chart types for comparison, trends, distributions, relationships, and part-of-whole data
- Design data encodings with clear axis labels, legends, and consistent color schemes
- Apply accessibility principles: patterns beyond color, text alternatives, keyboard navigation, and sufficient contrast
- Optimize responsive layouts for mobile and small screens with simplified views and touch-friendly interactions
- Maximize data-ink ratio and use annotation to highlight key insights
How to install data-visualization
npx skills add https://github.com/owl-listener/designer-skills --skill data-visualizationHow to use data-visualization
- 1.Identify your data type and analytical goal (comparison, trend, distribution, relationship, or composition)
- 2.Select the appropriate chart type from the guidance (bar, line, scatter, pie, treemap, etc.)
- 3.Design your data encoding: set axis ranges (start y-axis at zero for bar charts), choose sequential/diverging/categorical colors, and add clear labels
- 4.Apply accessibility checks: ensure color is not the only encoding, add text alternatives, and test keyboard navigation
- 5.Test your visualization at different screen sizes and simplify for mobile if needed
Use cases
- Choosing between bar, line, scatter, or pie charts based on your data structure and message
- Designing a dashboard with multiple chart types that use consistent color encoding
- Creating accessible charts that work for colorblind users and screen readers
- Simplifying complex visualizations for mobile displays or small-screen contexts
- Annotating charts with benchmarks, targets, or trend lines to emphasize key findings
- Data analysts and business intelligence professionals
- Product designers building dashboards or reporting tools
- Developers implementing data visualization components
- Anyone creating presentations or reports with data graphics
data-visualization FAQ
Use pie charts only for a few categories (2–3); stacked bars work better for many categories or when comparing totals across groups. Pie charts are harder to compare slice sizes accurately.
Don't rely on color alone. Use patterns, shapes, labels, or textures in addition to color. Choose colorblind-safe palettes (avoid red-green combinations) and provide text alternatives.
Yes, for bar charts—starting at zero prevents visual distortion. For line charts showing trends over time, you may start at a different value if it better shows variation without misleading.
Sequential scales go from light to dark for ordered data (e.g., low to high values). Diverging scales use two hues around a midpoint for data that has a meaningful center (e.g., above/below target).
Reduce data points, increase label size, use larger touch targets, consider a table view as an alternative, and test tooltips on actual devices.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: data-visualization
description: 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 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
design-brief
Write focused project briefs defining problem, audience, constraints, and success criteria at kickoff.
design-critique
Facilitate structured team design critiques with clear feedback rules and actionable outcomes.
design-debt-audit
Systematically identify and prioritize design inconsistencies across your product before they become structural problems.
design-impact-reporting
Connect design decisions to measurable business and user outcomes for leadership reporting.
design-negotiation
Advocate for design quality with evidence-based negotiation in cross-functional conversations.
design-principles
Define actionable design principles that resolve team disagreements and guide consistent decisions.