Data Visualization

Data Visualization

What I Do

I transform complex datasets into clear, insightful visual representations that help decision-makers understand patterns, trends, and anomalies. I combine statistical knowledge with design principles to create visualizations that tell compelling data stories.

When to Use Me

• Exploring datasets to find patterns and insights
• Communicating findings to stakeholders
• Creating dashboards for monitoring metrics
• Building reports with data-driven narratives
• Designing interactive data exploration tools
• Choosing appropriate chart types for data stories

Core Concepts

1. Chart Selection: Matching visualization types to data characteristics
2. Data-Ink Ratio: Maximizing information, minimizing decoration
3. Color Theory: Sequential, diverging, and categorical palettes
4. Visual Encoding: Position, length, area, color, angle as data channels
5. Scales and Axes: Linear, logarithmic, time, ordinal scales
6. Interactivity: Filtering, drilling, linking multiple views
7. Accessibility in Viz: Colorblind-safe palettes, alternative text
8. Dashboard Design: Layout, hierarchy, and information density
9. Animation: Transitions for understanding changes over time
10. Storytelling: Narrative structures for data communication

Code Examples

D3 Visualization Builder

class VisualizationBuilder {
  constructor(container, data) {
    this.container = container;
    this.data = data;
    this.width = 800;
    this.height = 400;
    this.margin = { top: 20, right: 30, bottom: 40, left: 50 };
    this.svg = null;
  }
  
  initialize() {
    this.svg = d3.select(this.container)
      .append('svg')
      .attr('width', this.width)
      .attr('height', this.height)
      .append('g')
      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
  }
  
  createLineChart(xKey, yKey) {
    const x = d3.scaleTime()
      .domain(d3.extent(this.data, d => new Date(d[xKey])))
      .range([0, this.width - this.margin.left - this.margin.right]);
    
    const y = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => d[yKey])])
      .range([this.height - this.margin.top - this.margin.bottom, 0]);
    
    this.svg.append('path')
      .datum(this.data)
      .attr('fill', 'none')
      .attr('stroke', '#2563eb')
      .attr('stroke-width', 2)
      .attr('d', d3.line()
        .x(d => x(new Date(d[xKey])))
        .y(d => y(d[yKey]))
      );
    
    this.addAxes(x, y);
    return this;
  }
  
  createBarChart(xKey, yKey) {
    const x = d3.scaleBand()
      .domain(this.data.map(d => d[xKey]))
      .range([0, this.width - this.margin.left - this.margin.right])
      .padding(0.2);
    
    const y = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => d[yKey])])
      .range([this.height - this.margin.top - this.margin.bottom, 0]);
    
    this.svg.selectAll('rect')
      .data(this.data)
      .join('rect')
      .attr('x', d => x(d[xKey]))
      .attr('y', d => y(d[yKey]))
      .attr('width', x.bandwidth())
      .attr('height', d => this.height - this.margin.top - this.margin.bottom - y(d[yKey]))
      .attr('fill', '#3b82f6');
    
    this.addAxes(x, y, true);
    return this;
  }
  
  addAxes(x, y, isCategorical = false) {
    this.svg.append('g')
      .attr('transform', `translate(0,${this.height - this.margin.top - this.margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));
    
    this.svg.append('g')
      .call(d3.axisLeft(y));
  }
  
  addTooltip() {
    const tooltip = d3.select(this.container)
      .append('div')
      .attr('class', 'tooltip')
      .style('opacity', 0)
      .style('position', 'absolute')
      .style('background', 'white')
      .style('padding', '8px')
      .style('border', '1px solid #ccc')
      .style('border-radius', '4px')
      .style('pointer-events', 'none');
    
    this.svg.selectAll('rect, circle')
      .on('mouseover', (event, d) => {
        tooltip.transition().duration(200).style('opacity', 1);
        tooltip.html(`Value: ${d.value || d[yKey]}`);
      })
      .on('mouseout', () => {
        tooltip.transition().duration(500).style('opacity', 0);
      });
  }
}

Chart Configuration Generator

class ChartConfigurator {
  constructor() {
    this.chartTypes = {
      line: { bestFor: ['time series', 'trends'], limits: ['continuous data'] },
      bar: { bestFor: ['categorical comparisons', 'rankings'], limits: ['time series'] },
      scatter: { bestFor: ['correlations', 'outliers'], limits: ['few data points'] },
      pie: { bestFor: ['part-to-whole', 'few categories'], limits: ['many categories'] },
      heatmap: { bestFor: ['patterns', 'density'], limits: ['precise values'] },
      boxplot: { bestFor: ['distributions', 'comparisons'], limits: ['single distributions'] }
    };
  }
  
  recommendChartType(data, goal) {
    const dataCharacteristics = this.analyzeData(data);
    
    let candidates = Object.entries(this.chartTypes)
      .filter(([type, config]) => 
        config.bestFor.some(g => goal.toLowerCase().includes(g))
      );
    
    candidates = candidates.filter(([type, config]) =>
      !config.limits.some(limit => 
        dataCharacteristics.violates.includes(limit)
      )
    );
    
    return candidates[0]?.[0] || 'bar';
  }
  
  analyzeData(data) {
    if (!data.length) return { type: 'empty' };
    
    const sample = data[0];
    const keys = Object.keys(sample);
    
    const types = {
      numeric: keys.filter(k => typeof sample[k] === 'number'),
      temporal: keys.filter(k => 
        sample[k] instanceof Date || 
        !isNaN(Date.parse(sample[k]))
      ),
      categorical: keys.filter(k => typeof sample[k] === 'string')
    };
    
    return {
      hasNumeric: types.numeric.length > 0,
      hasTemporal: types.temporal.length > 0,
      hasCategorical: types.categorical.length > 0,
      violates: []
    };
  }
  
  generateConfig(type, data, options = {}) {
    const baseConfig = {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        legend: { display: true, position: 'top' },
        tooltip: {
          backgroundColor: 'rgba(0,0,0,0.8)',
          padding: 12,
          cornerRadius: 4
        }
      },
      scales: this.generateScales(type, data)
    };
    
    return { type, data, options: { ...baseConfig, ...options } };
  }
  
  generateScales(type, data) {
    if (['pie', 'doughnut', 'radar'].includes(type)) return {};
    
    return {
      x: {
        grid: { display: false },
        ticks: { maxRotation: 45 }
      },
      y: {
        beginAtZero: true,
        grid: { color: 'rgba(0,0,0,0.1)' }
      }
    };
  }
}

Real-time Data Stream Visualizer

class StreamVisualizer {
  constructor(container, options = {}) {
    this.container = container;
    this.buffer = [];
    this.maxPoints = options.maxPoints || 100;
    this.updateInterval = options.interval || 1000;
    this.isRunning = false;
  }
  
  start(dataStream) {
    this.dataStream = dataStream;
    this.isRunning = true;
    this.render();
    
    setInterval(() => {
      if (this.isRunning) {
        this.addDataPoint(this.dataStream());
        this.update();
      }
    }, this.updateInterval);
  }
  
  addDataPoint(point) {
    this.buffer.push({
      timestamp: new Date(),
      value: point
    });
    
    if (this.buffer.length > this.maxPoints) {
      this.buffer.shift();
    }
  }
  
  render() {
    this.container.innerHTML = '';
    this.canvas = document.createElement('canvas');
    this.canvas.width = this.container.clientWidth;
    this.canvas.height = this.container.clientHeight;
    this.container.appendChild(this.canvas);
    this.ctx = this.canvas.getContext('2d');
  }
  
  update() {
    if (!this.ctx) return;
    
    const { width, height } = this.canvas;
    this.ctx.clearRect(0, 0, width, height);
    
    const padding = 40;
    const graphWidth = width - padding * 2;
    const graphHeight = height - padding * 2;
    
    const maxValue = Math.max(...this.buffer.map(d => d.value));
    const minValue = Math.min(...this.buffer.map(d => d.value));
    
    this.ctx.beginPath();
    this.ctx.strokeStyle = '#2563eb';
    this.ctx.lineWidth = 2;
    
    this.buffer.forEach((point, index) => {
      const x = padding + (index / (this.maxPoints - 1)) * graphWidth;
      const y = padding + graphHeight - 
        ((point.value - minValue) / (maxValue - minValue)) * graphHeight;
      
      if (index === 0) {
        this.ctx.moveTo(x, y);
      } else {
        this.ctx.lineTo(x, y);
      }
    });
    
    this.ctx.stroke();
    
    // Draw axes
    this.ctx.strokeStyle = '#ccc';
    this.ctx.beginPath();
    this.ctx.moveTo(padding, padding);
    this.ctx.lineTo(padding, height - padding);
    this.ctx.lineTo(width - padding, height - padding);
    this.ctx.stroke();
    
    // Draw current value
    const lastPoint = this.buffer[this.buffer.length - 1];
    this.ctx.fillStyle = '#2563eb';
    this.ctx.fillText(
      `Current: ${lastPoint.value.toFixed(2)}`,
      width - 100,
      padding + 20
    );
  }
  
  stop() {
    this.isRunning = false;
  }
}

Best Practices

1. Choose the right chart type for your data and message
2. Start axes at zero for accurate comparison (except time series)
3. Use clear titles, labels, and legends
4. Apply color meaningfully and consistently
5. Remove chart junk and maximize data-ink ratio
6. Provide context through reference lines and benchmarks
7. Make visualizations accessible with colorblind-safe palettes
8. Consider mobile and responsive visualization needs
9. Animate changes thoughtfully to aid understanding
10. Iterate based on user testing and feedback