AW
Back to projects

Data Pipeline: Gapminder

Interactive demo of a data pipeline flow: from raw data to insights in 4 steps. Built with SQL transformations and data from Gapminder.org.

Tech stack

SQL
React
TypeScript
Recharts
Tailwind CSS

Overview

An interactive visualization of a typical data pipeline flow using real data from Gapminder.org. Demonstrates the full chain from raw data ingestion, data cleaning (duplicate rows, null values, invalid records), transformation and aggregation by continent, to final reporting with charts. Each step shows the SQL code used and the resulting dataset.

Key features

  • 4-step interactive pipeline visualization
  • Real data from Gapminder.org (life expectancy, GDP, population)
  • SQL code at each step showing transformations
  • Data cleaning with summary of removed rows
  • Aggregation by continent with scatter plot and bar chart

Challenges & learnings

Presenting a data pipeline flow interactively in an educational way required balancing enough technical detail (SQL code, row counts, cleaning rules) without overwhelming the user. The solution was a stepper component where each step shows code, data, and summary side by side.