Skip to content

README.md

Latest commit

 

History

History
66 lines (44 loc) · 3.61 KB

README.md

File metadata and controls

66 lines (44 loc) · 3.61 KB
Raw

Open index.html in a modern browser.

Note: Because the visualization loads the CSV via fetch(), some browsers (notably Chrome) may block data loading if you open the page via file://. If that happens, run a small local server from the project root:

python3 -m http.server 8000

Then open http://localhost:8000/.

Case Choice

Case B — Gapminder Animated Bubble Chart

Tech Stack

Component Technology
Visualization D3.js v7 (loaded via CDN)
Layout & Styling HTML5 + CSS3 (Flexbox, Grid)
Data Format CSV (loaded client-side)

No build step and no dependencies to install. The application runs in the browser from a single index.html file that loads main.js, style.css, and the dataset CSV.

Biases Addressed (Integrated Redesign)

All three biases diagnosed in Phase 1 for Case B are addressed within a single, cohesive visualization.

Bias 1 — Log X-axis compresses wealth inequality. A Log/Linear toggle lets the viewer switch the X-axis scale. The default logarithmic view compresses income differences; switching to linear reveals the true absolute gap between low-income and high-income countries.

Animation encourages a simplified “progress” narrative. The animated play sequence is replaced by a 2×2 small-multiples grid showing four time snapshots side by side, enabling direct comparison across decades without relying on motion tracking or memory.

Bias 3 — Smooth interpolation hides data sparsity. A Data Quality Overlay toggle visually encodes the confidence level of each data point. High-confidence data appears solid; lower-confidence data is progressively faded with coloured borders (orange for low, red for very low). This makes uncertainty visible rather than hidden behind smooth interpolation.

Interactions Beyond Basic Tooltips

The assignment requires at least one meaningful interaction beyond hover tooltips. This redesign includes five:

  1. Log/Linear Scale Toggle — switches the X-axis between logarithmic and linear scales.
  2. Data Quality Overlay — toggles uncertainty encoding (opacity + outline) based on data_quality.
  3. Country highlight (linked across panels) — select a country to highlight it consistently across all four snapshots; other countries remain visible but muted.
  4. Continent Filter Checkboxes — isolate continents for focused comparison.
  5. Comparison start-year slider — sets the comparison anchor year; the grid shows a long-horizon set of years by default (e.g., 1952 → 1972 → 1992 → 2007) while keeping 5-year stepping in the underlying dataset.

File Structure

README.md              ← this file
src/
  (legacy folder; not required for hosting)
data/
  gapminder_with_quality.csv  ← Gapminder dataset with data_quality column

Data Preparation

The dataset is the standard Gapminder dataset (142 countries, 1952–2007) obtained from plotly.express.data.gapminder(). A data_quality column was added based on the historical availability of GDP and life-expectancy statistics by continent and decade:

Continent Pre-1960 1960–1969 1970+
Europe, Oceania medium high high
Americas low medium high
Asia low medium high
Africa very_low very_low/low medium

This classification reflects the historical reality that systematic national accounts and vital registration systems were established at different times across regions. The quality assignments are documented in the data preparation script (src/prepare_data.py if included, or inline in the CSV generation step).