Data Visualization

Create clear, purposeful visualizations that communicate data effectively.

Decision Framework

1. Choose Output Format

2. Choose Chart Type

Comparison (values across categories):

• •Bar chart: Few categories, discrete comparison
• •Grouped bar: Multiple series comparison
• •Lollipop: Cleaner alternative to bars

Trend (change over time):

• •Line chart: Continuous data, multiple series
• •Area chart: Emphasize magnitude/cumulative
• •Sparkline: Compact trend indicator

Distribution (data spread):

• •Histogram: Frequency distribution
• •Box plot: Quartiles and outliers
• •Violin: Distribution shape

Composition (parts of whole):

• •Pie/Donut: 2-5 categories max, percentages
• •Stacked bar: Composition over categories
• •Treemap: Hierarchical composition

Relationship (correlation):

• •Scatter plot: Two variables correlation
• •Bubble chart: Three variables
• •Heatmap: Matrix relationships

Geospatial:

• •Choropleth: Regional data
• •Point map: Location-based values

Implementation Patterns

React Artifact (Recharts)

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', value: 400 },
  { month: 'Feb', value: 300 },
];

export default function Chart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
        <XAxis dataKey="month" tick={{ fill: '#666' }} />
        <YAxis tick={{ fill: '#666' }} />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#2563eb" strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Python Static Export

import matplotlib.pyplot as plt

plt.style.use('seaborn-v0_8-whitegrid')
fig, ax = plt.subplots(figsize=(10, 6), dpi=150)

ax.plot(x, y, color='#2563eb', linewidth=2)
ax.set_title('Title', fontsize=14, fontweight='600', pad=20)
ax.set_xlabel('X Label', fontsize=11)
ax.set_ylabel('Y Label', fontsize=11)
ax.spines['top'].set_visible(False)
ax.spines['right'].set_visible(False)

plt.tight_layout()
plt.savefig('chart.png', bbox_inches='tight', facecolor='white')

HTML Artifact (Chart.js)

<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{ data: [10, 20, 30], backgroundColor: '#2563eb' }]
  },
  options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>

Design Principles

Color

• •Sequential: Single hue gradient for ordered data (light→dark)
• •Diverging: Two hues for data with meaningful center (blue←white→red)
• •Categorical: Distinct hues for unordered categories (max 7-8)
• •Colorblind-safe: avoid red/green pairs

Typography

• •Title: 14-16px, semibold
• •Axis labels: 11-12px, regular
• •Annotations: 10-11px
• •Sans-serif for clarity (Inter, system-ui)

Layout

• •Data-ink ratio: maximize information, minimize decoration
• •White space: generous margins
• •Alignment: left-align text, right-align numbers
• •Grid: subtle, low contrast

Accessibility

• •Minimum contrast ratio 4.5:1
• •Don't rely on color alone—use patterns, labels
• •Alt text for static images
• •Keyboard navigation for interactive

Anti-Patterns

• •3D charts (distort perception)
• •Pie charts with >5 slices
• •Dual Y-axes (misleading)
• •Truncated axes (exaggerate)
• •Rainbow color scales
• •Excessive gridlines

Dashboard Composition

1. •Hierarchy: Lead with the key metric
2. •Flow: Left-to-right, top-to-bottom
3. •Grouping: Related charts in proximity
4. •Consistency: Same color encoding throughout
5. •Filtering: Global filters affect all charts

Data Preparation Checklist

• • Handle missing values
• • Check for outliers
• • Normalize if comparing scales
• • Sort meaningfully
• • Aggregate appropriately
• • Round display values (2-3 digits)

Resources

See references/ for detailed guidance:

• •color-palettes.md: Curated color schemes for different data types
• •chart-selection.md: Extended decision tree for complex cases