data-visualization

Data Visualization

Build accessible, performant data visualizations using modern libraries. Choose the right chart type, implement responsive layouts, and optimize for large datasets.

Chart Type Selection

Choose charts based on data relationships, not aesthetics.

BAD - Wrong chart for the task:

// Pie chart for comparing 12 categories - hard to compare angles
<PieChart width={400} height={400}>
  <Pie data={monthlyData} dataKey="value" nameKey="month" />
</PieChart>

// Line chart for categorical data with no time relationship
<LineChart data={productCategories}>
  <Line dataKey="sales" />
</LineChart>

GOOD - Chart matches data structure:

// Bar chart for category comparison - easy to compare lengths
<BarChart width={600} height={400} data={monthlyData}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" fill="#d4943a" />
</BarChart>

// Scatter plot for correlation analysis
<ScatterChart width={600} height={400}>
  <CartesianGrid />
  <XAxis dataKey="age" name="Age" />
  <YAxis dataKey="salary" name="Salary" />
  <Scatter data={employees} fill="#d4943a" />
</ScatterChart>

Chart selection guide:

• Bar/Column: Compare categories, rankings, discrete values
• Line: Time series, trends over continuous periods
• Scatter: Correlation between two variables, clustering
• Heatmap: Patterns in 2D categorical data (day/hour traffic)
• Area: Cumulative values over time, part-to-whole relationships
• Avoid pie charts: Use bar charts instead (easier comparison)

Recharts Implementation

Recharts provides React-native declarative charts with built-in responsiveness.

BAD - Fixed dimensions, no accessibility:

function SalesChart({ data }) {
  return (
    <LineChart width={800} height={300} data={data}>
      <Line dataKey="sales" stroke="red" />
      <Line dataKey="profit" stroke="green" />
    </LineChart>
  );
}

GOOD - Responsive, accessible, properly labeled:

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

interface DataPoint {
  date: string;
  sales: number;
  profit: number;
}

interface SalesChartProps {
  data: DataPoint[];
}

const SalesChart: React.FC<SalesChartProps> = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        aria-label="Sales and profit trend over time"
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#333" />
        <XAxis
          dataKey="date"
          stroke="#666"
          tick={{ fill: '#666' }}
        />
        <YAxis
          stroke="#666"
          tick={{ fill: '#666' }}
          label={{ value: 'USD', angle: -90, position: 'insideLeft' }}
        />
        <Tooltip
          contentStyle={{ backgroundColor: '#1a1a1a', border: '1px solid #333' }}
          formatter={(value: number) => `$${value.toLocaleString()}`}
        />
        <Legend />
        <Line
          type="monotone"
          dataKey="sales"
          stroke="#3b82f6"
          strokeWidth={2}
          dot={{ fill: '#3b82f6', r: 4 }}
          activeDot={{ r: 6 }}
          name="Sales"
        />
        <Line
          type="monotone"
          dataKey="profit"
          stroke="#d4943a"
          strokeWidth={2}
          dot={{ fill: '#d4943a', r: 4 }}
          name="Profit"
        />
      </LineChart>
    </ResponsiveContainer>
  );
};