Data Visualization

---
name: Data Visualization
description: Use when Creates interactive dashboards and data visualizations using D3.js, Chart.js, Matplotlib, and Plotly with accessibility and performance optimization
category: Data & AI
version: 1.0.0
tools: []
---

## Process

1. Analyze the dataset structure, cardinality, and the specific question the visualization must answer, determining whether the goal is comparison, composition, distribution, relationship, or trend analysis before selecting a chart type.
2. Choose the visual encoding that maps data dimensions to perceptual channels appropriately: position for quantitative comparison (most accurate), length for magnitude, color hue for categorical distinction, and color saturation for sequential values, following Cleveland and McGill's perceptual accuracy hierarchy.
3. Implement the chart using the appropriate library: D3.js for custom interactive web visualizations with fine-grained control, Chart.js for standard chart types with minimal configuration, Plotly for interactive scientific plots, and Matplotlib/Seaborn for static publication-quality figures.
4. Design the interaction model for web-based visualizations: tooltips for detail-on-demand, brushing and linking for cross-filtering between views, zoom and pan for dense datasets, and animated transitions for state changes that preserve object constancy.
5. Build the data transformation layer that aggregates, filters, and reshapes the source data into the exact structure the visualization library expects, keeping this transformation separate from the rendering logic for testability.
6. Implement responsive layouts that adapt chart dimensions, label density, and interaction models to the viewport size, using SVG viewBox scaling or canvas-based rendering for performance on high-density displays.
7. Apply accessibility standards: sufficient color contrast ratios (WCAG AA), alternative text descriptions for screen readers, keyboard-navigable interactive elements, and colorblind-safe palettes (using viridis or ColorBrewer schemes).
8. Optimize rendering performance for large datasets: use canvas instead of SVG for charts with more than 5,000 elements, implement data windowing or aggregation at zoom levels, and debounce interaction handlers to prevent frame drops.
9. Design the dashboard layout using a grid system that groups related visualizations, maintains consistent axes and scales across linked views, and provides clear titles, subtitles, and source attributions for each chart.
10. Implement data refresh mechanisms for live dashboards: WebSocket connections for real-time streaming data, polling intervals for periodic updates, and optimistic rendering that shows stale data with a freshness indicator while fetching updates.

## Technical Standards

- Axis scales must start at zero for bar charts; truncated axes are only acceptable for line charts showing relative change with clear labeling.
- Color palettes must be distinguishable by colorblind users; never rely on red-green distinction as the sole differentiator.
- Chart titles must state the insight or question, not just the data dimensions; "Revenue Growth Slowed in Q3" is better than "Revenue by Quarter."
- Interactive tooltips must show the exact data value, formatted with appropriate precision and units, not just the visual position.
- All external data must be validated and sanitized before rendering to prevent XSS through user-generated labels or data values.
- Aspect ratios must be chosen to avoid misleading slopes; time series should use a moderate aspect ratio (roughly 2:1) to represent rates of change fairly.
- Legend placement must not obscure data; prefer direct labeling of series when the number of categories is small.

## Verification

- Validate that visual encodings accurately represent the underlying data by spot-checking rendered values against the source dataset.
- Confirm that all charts are readable and navigable using keyboard-only interaction and screen reader technology.
- Test responsive layouts at mobile (375px), tablet (768px), and desktop (1440px) breakpoints to confirm readability and interaction usability.