## Data Visualization Framework
### Phase 1: Data Analysis
```
Analyze data for visualization:
**Dataset:** [Description of data]
**Audience:** [Technical, business, public]
**Goal:** [Inform, persuade, explore, explain]
Data assessment:
1. **Data Types**
- Categorical (nominal, ordinal)
- Numerical (discrete, continuous)
- Temporal (dates, time series)
- Geographical (locations, regions)
2. **Relationships to Show**
- Comparisons (A vs B)
- Trends over time
- Distributions
- Part-to-whole
- Correlations
- Geographic patterns
3. **Data Quality**
- Missing values handling
- Outliers treatment
- Aggregation levels
- Confidence intervals
4. **Key Insights**
- What story does the data tell?
- What's surprising or noteworthy?
- What decisions should this inform?
Recommend visualization approach.
```
### Phase 2: Chart Selection
```
Select appropriate chart type for:
**Data:** [Description]
**Message:** [What you want to communicate]
**Audience:** [Who will view this]
Chart selection guide:
**Comparison:**
- Bar chart: Few categories, discrete comparison
- Grouped bar: Compare across groups
- Bullet chart: Actual vs target
**Trend:**
- Line chart: Continuous time series
- Area chart: Volume over time
- Sparklines: Compact trend indicators
**Distribution:**
- Histogram: Frequency distribution
- Box plot: Statistical distribution
- Violin plot: Distribution + density
**Part-to-Whole:**
- Pie chart: Simple proportions (≤5 categories)
- Stacked bar: Proportions with comparison
- Treemap: Hierarchical proportions
**Correlation:**
- Scatter plot: Two variables
- Bubble chart: Three variables
- Heatmap: Matrix correlation
**Geographic:**
- Choropleth: Regional values
- Point map: Location data
- Flow map: Movement between locations
Recommend chart with rationale.
```
### Phase 3: Visual Design
```
Design visualization with:
**Chart Type:** [Selected chart]
**Data Points:** [Number of items]
**Display Context:** [Dashboard, report, presentation]
Design principles:
1. **Color Strategy**
```
Sequential: Light → Dark for ordered values
Diverging: Two colors with neutral midpoint
Categorical: Distinct, accessible colors
Accessibility:
- 4.5:1 contrast ratio minimum
- Don't rely on color alone
- Test with color blindness simulators
- Use ColorBrewer palettes
```
2. **Typography**
- Title: Clear, descriptive (not "Chart 1")
- Labels: Readable at intended size
- Legend: Only if necessary
- Annotations: Highlight key insights
3. **Layout**
- Data-ink ratio: Maximize data, minimize decoration
- White space: Prevent crowding
- Alignment: Grid-based organization
- Hierarchy: Most important data prominent
4. **Interactivity** (if applicable)
- Hover: Show details on demand
- Filter: Focus on subsets
- Zoom: Explore dense data
- Drill-down: Navigate hierarchy
Generate visualization specification.
```
### Phase 4: Dashboard Design
```
Design dashboard for:
**Purpose:** [Operational, analytical, strategic]
**Users:** [Roles and needs]
**Refresh Rate:** [Real-time, daily, weekly]
Dashboard structure:
1. **Information Architecture**
```
┌─────────────────────────────────────┐
│ KPI Summary Cards (Top Row) │
├──────────────────┬──────────────────┤
│ Primary Chart │ Secondary Chart │
│ (Main focus) │ (Supporting) │
├──────────────────┴──────────────────┤
│ Trend Chart (Full width) │
├──────────────────┬──────────────────┤
│ Detail Table │ Filters/Controls │
└──────────────────┴──────────────────┘
```
2. **Visual Hierarchy**
- Top: Most critical metrics
- Left: Primary navigation/filters
- Center: Main analysis area
- Right: Supporting context
3. **Interactivity**
- Global filters affect all charts
- Cross-filtering between charts
- Date range selectors
- Drill-down capabilities
4. **Performance**
- Limit visible charts (5-7 max)
- Pre-aggregate data where possible
- Progressive loading for large datasets
- Cache expensive calculations
Generate dashboard wireframe and specification.
```
## Code Examples
### Chart.js Implementation
```javascript
// Accessible bar chart with Chart.js
const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: 'Revenue ($M)',
data: [12, 19, 8, 15],
backgroundColor: [
'#2563eb', // Blue
'#16a34a', // Green
'#dc2626', // Red
'#9333ea' // Purple
],
borderWidth: 2
}
]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Quarterly Revenue 2026',
font: { size: 18, weight: 'bold' }
},
legend: {
position: 'bottom'
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Revenue (Millions USD)'
}
}
}
}
});
```
### D3.js Line Chart
```javascript
// Responsive line chart with D3.js
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3
.select('#chart')
.append('svg')
.attr(
'viewBox',
`0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`
)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// Scales
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
// Line generator
const line = d3
.line()
.x((d) => x(d.date))
.y((d) => y(d.value))
.curve(d3.curveMonotoneX);
// Axes with accessible labels
svg
.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x))
.attr('aria-label', 'Time axis');
svg.append('g').call(d3.axisLeft(y)).attr('aria-label', 'Value axis');
```
## Accessibility Checklist
```
Ensure visualizations are accessible:
[ ] Color contrast meets WCAG AA (4.5:1)
[ ] Information not conveyed by color alone
[ ] Patterns/shapes distinguish data series
[ ] Alt text describes the visualization
[ ] Data table available as alternative
[ ] Keyboard navigation works
[ ] Screen reader compatible
[ ] Text resizable without breaking layout
[ ] Focus indicators visible
[ ] Motion can be paused/reduced
```
## Best Practices
1. **Start with the Message**: Know what insight you're communicating
2. **Choose Appropriate Charts**: Match chart type to data relationship
3. **Simplify**: Remove chartjunk, maximize data-ink ratio
4. **Label Clearly**: Titles, axes, and legends should be self-explanatory
5. **Color Purposefully**: Use color to encode meaning, not decorate
6. **Design for Accessibility**: Everyone should understand your visualization
7. **Test with Users**: Validate that the message comes through
8. **Document Data Sources**: Note where data comes from and limitations
## Example Session
**User**: "Visualize monthly sales data by product category and region."
**Response**:
> Based on your data structure, I recommend a **faceted bar chart** with small multiples:
>
> **Layout:**
>
> ```
> ┌──────────────────────────────────────────┐
> │ Monthly Sales by Category & Region │
> ├────────────┬────────────┬────────────────┤
> │ NORTH │ SOUTH │ WEST │
> │ ████ │ ██████ │ ████████ │
> │ ██████ │ ████ │ ██████ │
> │ ████████ │ ████████ │ ████ │
> └────────────┴────────────┴────────────────┘
> Electronics Apparel Home Goods
> ```
>
> **Why this approach:**
>
> - Enables comparison across regions (columns)
> - Shows category performance within each region
> - Avoids overcrowded single chart
>
> **Color Palette (colorblind-safe):**
>
> - Electronics: #0077BB (blue)
> - Apparel: #EE7733 (orange)
> - Home Goods: #009988 (teal)
## Related Resources
- [Data Visualization Catalogue](https://datavizcatalogue.com/)
- [ColorBrewer](https://colorbrewer2.org/)
- [Chartability](https://chartability.fizz.studio/)
- [Storytelling with Data](https://www.storytellingwithdata.com/)