refactor: tighten data boundaries (#14)

* refactor: tighten data boundaries

* ci: deploy pages from master

* docs: make readme more personal

Author: ayydany

.github/workflows/deploy-pages.yml

@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: [main]
+    branches: [master]
   workflow_dispatch:
 
 permissions:

README.md

@@ -1,20 +1,20 @@
 # Olympics Visualization
 
-A modern, interactive data visualization dashboard for Summer Olympics historical data (1896 - 2012). The app is now a fully TypeScript React/Vite project with high-performance D3.js visualizations, shared state, responsive layouts, and runtime CSV/JSON data loading.
+An interactive dashboard for exploring Summer Olympics data from 1896 to 2012.
 
 This visualization was initially developed as a project for the Masters Course Information Visualization at Lisbon Técnico but turned into sort of a hobby of mine.
 
+The project has changed quite a bit since the first version. It is now a 100% TypeScript app built with React, Vite, and D3.js, with the data loaded from CSV/JSON files at runtime. The goal is still simple: make it easy to move between countries, years, sports, and medal breakdowns without losing the bigger picture.
+
 ## Features
 
-- **Interactive World Map:** Custom D3.js Mercator projection with zoom/pan and country selection.
-- **Dynamic Bubble Chart:** Force-directed simulation to explore medals by Sport, Discipline, and Event.
-- **Comparative Trends:** Line charts and scatter plots with synchronized multi-country selection (up to 4).
-- **Stacked Medal Bars:** Gold, silver, and bronze composition for selected countries across the active year and sport filters.
-- **Population Efficiency:** Medal output normalized by average population, shown as medals per million people.
-- **Reorderable Dashboard:** Toggle reorder mode to move and resize visualizations in a responsive grid.
-- **Modern UI:** Built with Material UI and styled using the elegant Catppuccin color palette.
-- **Responsive Layout:** Dynamic grid system powered by `react-grid-layout`.
-- **Asynchronous Data:** High-performance runtime fetching of CSV/JSON datasets.
+- **World map:** Select countries directly from a D3-rendered map with zoom and pan support.
+- **Bubble chart:** Explore medals by sport, discipline, and event through a force-based view.
+- **Line and scatter charts:** Compare selected countries across years and medal totals.
+- **Stacked medal bars:** See gold, silver, and bronze composition for the active country, year, and sport filters.
+- **Population efficiency:** Compare medal output normalized by average population.
+- **Responsive dashboard:** Move and resize visualizations through a grid layout built for desktop and smaller screens.
+- **Runtime data loading:** Load the Olympics, population, and world map datasets from public CSV/JSON files.
 
 ## Tech Stack
 
@@ -25,7 +25,8 @@ This visualization was initially developed as a project for the Masters Course I
 - **UI Components:** [Material UI](https://mui.com/)
 - **Grid Layout:** [React Grid Layout](https://github.com/STRML/react-grid-layout)
 - **Styling:** [Tailwind CSS](https://tailwindcss.com/), component CSS, and [Catppuccin](https://catppuccin.com/)
-- **Deployment:** GitHub Pages via GitHub Actions, with custom domain support
+- **Tooling:** Bun and npm scripts for local development, testing, and production builds
+- **Deployment:** GitHub Pages through GitHub Actions
 
 ## Getting Started
 
@@ -37,24 +38,28 @@ This visualization was initially developed as a project for the Masters Course I
 ### Installation
 
 1. Clone the repository:
+
    ```bash
    git clone https://github.com/ayydany/Olympics-Visualization.git
    cd Olympics-Visualization
    ```
 
 2. Install dependencies:
+
    ```bash
    npm install
    ```
 
 3. Start the development server:
+
    ```bash
    npm run dev
    ```
 
 ### Building for Production
 
 To create an optimized production build:
+
 ```bash
 npm run build
 ```
@@ -69,4 +74,4 @@ bun run build
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ---
-Made with ❤️ by [ayydany](https://ayydany.com)
+Made with love by [ayydany](https://ayydany.com)

src/features/dashboard/components/Bubblechart.tsx

@@ -49,7 +49,9 @@ const Bubblechart: React.FC<BubblechartProps> = ({ dictionaryData, countryData,
       setDimensions({ width, height });
     });
 
-    resizeObserver.observe(container.parentElement!);
+    if (container.parentElement) {
+      resizeObserver.observe(container.parentElement);
+    }
 
     return () => resizeObserver.disconnect();
   }, [isResizing]);
@@ -246,7 +248,7 @@ const Bubblechart: React.FC<BubblechartProps> = ({ dictionaryData, countryData,
           .attr("stroke", "#cdd6f4");
       })
       .on("mousemove", (event) => {
-        setTooltipState((prev: any) => ({
+        setTooltipState((prev) => ({
           ...prev,
           x: event.pageX,
           y: event.pageY

src/features/dashboard/components/Dashboard.tsx

@@ -24,7 +24,7 @@ import Worldmap from "@/features/dashboard/components/Worldmap";
 import Tooltip from "@/components/Tooltip";
 import { fetchData } from "@/utils/api";
 import useYearStore from "@/stores/useYearStore";
-import { OlympicRow, DictionaryEntry, TooltipState } from "@/types";
+import { OlympicRow, DictionaryEntry, PopulationRow, TooltipState, WorldGeo } from "@/types";
 
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
@@ -35,8 +35,8 @@ const MainComponent: React.FC = () => {
   const [gridWidth, setGridWidth] = useState(1200);
   const [dictionaryData, setDictionaryData] = useState<DictionaryEntry[] | null>(null);
   const [countryData, setCountyData] = useState<OlympicRow[] | null>(null);
-  const [populationData, setPopulationData] = useState<any[] | null>(null);
-  const [worldGeo, setWorldGeo] = useState<any>(null);
+  const [populationData, setPopulationData] = useState<PopulationRow[] | null>(null);
+  const [worldGeo, setWorldGeo] = useState<WorldGeo | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isResizing, setIsResizing] = useState(false);
   const [isReorderMode, setIsReorderMode] = useState(false);
@@ -108,8 +108,11 @@ const MainComponent: React.FC = () => {
     }
   }, [countrySelection.length, dictionaryData, setDefaultCountries]);
 
-  const visReady = useMemo(() => {
-    return dictionaryData && countryData && populationData && worldGeo;
+  const readyData = useMemo(() => {
+    if (!dictionaryData || !countryData || !populationData || !worldGeo) {
+      return null;
+    }
+    return { dictionaryData, countryData, populationData, worldGeo };
   }, [dictionaryData, countryData, populationData, worldGeo]);
 
   const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -280,7 +283,7 @@ const MainComponent: React.FC = () => {
 
       <div ref={gridContainerRef} className="flex-grow overflow-y-auto bg-ctp-crust p-2 relative">
         {isLoading && <div className="p-3 text-ctp-subtext0 font-medium text-center mt-10">Loading dataset...</div>}
-        {visReady && (
+        {readyData && (
           <ResponsiveGridLayout
             className="layout"
             layouts={filteredLayouts}
@@ -296,42 +299,42 @@ const MainComponent: React.FC = () => {
             {visibleCharts.worldmap && (
               <div key="worldmap" className={`vis-cell group ${isReorderMode ? "is-reordering" : ""}`}>
                 <div className="viz-content w-full h-full pointer-events-auto">
-                  <Worldmap dictionaryData={dictionaryData!} setTooltipState={updateTooltipState} worldGeo={worldGeo!} isResizing={isResizing} />
+                  <Worldmap dictionaryData={readyData.dictionaryData} setTooltipState={updateTooltipState} worldGeo={readyData.worldGeo} isResizing={isResizing} />
                 </div>
               </div>
             )}
             {visibleCharts.bubblechart && (
               <div key="bubblechart" className={`vis-cell group ${isReorderMode ? "is-reordering" : ""}`}>
                 <div className="viz-content w-full h-full pointer-events-auto">
-                  <Bubblechart countryData={countryData!} dictionaryData={dictionaryData!} setTooltipState={updateTooltipState} isResizing={isResizing} />
+                  <Bubblechart countryData={readyData.countryData} dictionaryData={readyData.dictionaryData} setTooltipState={updateTooltipState} isResizing={isResizing} />
                 </div>
               </div>
             )}
             {visibleCharts.scatterplot && (
               <div key="scatterplot" className={`vis-cell group ${isReorderMode ? "is-reordering" : ""}`}>
                 <div className="viz-content w-full h-full pointer-events-auto">
-                  <Scatterplot countryData={countryData!} populationData={populationData!} dictionaryData={dictionaryData!} setTooltipState={updateTooltipState} isResizing={isResizing} />
+                  <Scatterplot countryData={readyData.countryData} populationData={readyData.populationData} dictionaryData={readyData.dictionaryData} setTooltipState={updateTooltipState} isResizing={isResizing} />
                 </div>
               </div>
             )}
             {visibleCharts.linechart && (
               <div key="linechart" className={`vis-cell group ${isReorderMode ? "is-reordering" : ""}`}>
                 <div className="viz-content w-full h-full pointer-events-auto">
-                  <Linechart countryData={countryData!} dictionaryData={dictionaryData!} setTooltipState={updateTooltipState} isResizing={isResizing} />
+                  <Linechart countryData={readyData.countryData} dictionaryData={readyData.dictionaryData} setTooltipState={updateTooltipState} isResizing={isResizing} />
                 </div>
               </div>
             )}
             {visibleCharts.stackedMedals && (
               <div key="stackedMedals" className={`vis-cell group ${isReorderMode ? "is-reordering" : ""}`}>
                 <div className="viz-content w-full h-full pointer-events-auto">
-                  <StackedMedalBars countryData={countryData!} dictionaryData={dictionaryData!} setTooltipState={updateTooltipState} isResizing={isResizing} />
+                  <StackedMedalBars countryData={readyData.countryData} dictionaryData={readyData.dictionaryData} setTooltipState={updateTooltipState} isResizing={isResizing} />
                 </div>
               </div>
             )}
             {visibleCharts.populationEfficiency && (
               <div key="populationEfficiency" className={`vis-cell group ${isReorderMode ? "is-reordering" : ""}`}>
                 <div className="viz-content w-full h-full pointer-events-auto">
-                  <PopulationEfficiencyChart countryData={countryData!} populationData={populationData!} dictionaryData={dictionaryData!} setTooltipState={updateTooltipState} isResizing={isResizing} />
+                  <PopulationEfficiencyChart countryData={readyData.countryData} populationData={readyData.populationData} dictionaryData={readyData.dictionaryData} setTooltipState={updateTooltipState} isResizing={isResizing} />
                 </div>
               </div>
             )}

src/features/dashboard/components/PopulationEfficiencyChart.tsx

@@ -1,14 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import * as d3 from "d3";
 import useYearStore from "@/stores/useYearStore";
-import { DictionaryEntry, OlympicRow, TooltipStateSetter } from "@/types";
+import { DictionaryEntry, OlympicRow, PopulationRow, TooltipStateSetter } from "@/types";
 import "./PopulationEfficiencyChart.css";
 
-interface PopulationRow {
-  CountryCode: string;
-  [year: string]: string | number;
-}
-
 interface PopulationEfficiencyChartProps {
   countryData: OlympicRow[];
   populationData: PopulationRow[];

src/features/dashboard/components/Scatterplot.tsx

@@ -1,14 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
 import useYearStore from "@/stores/useYearStore";
-import { OlympicRow, DictionaryEntry, TooltipStateSetter } from "@/types";
+import { OlympicRow, DictionaryEntry, PopulationRow, TooltipStateSetter } from "@/types";
 import "./Scatterplot.css";
 
-interface PopulationRow {
-  CountryCode: string;
-  [year: string]: string | number;
-}
-
 interface ScatterPoint {
   code: string;
   name: string;
@@ -49,7 +44,9 @@ const Scatterplot: React.FC<ScatterplotProps> = ({ countryData, populationData,
       setDimensions({ width, height });
     });
 
-    resizeObserver.observe(container.parentElement!);
+    if (container.parentElement) {
+      resizeObserver.observe(container.parentElement);
+    }
 
     return () => resizeObserver.disconnect();
   }, [isResizing]);
@@ -243,7 +240,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({ countryData, populationData,
           .attr("stroke", "#cdd6f4");
       })
       .on("mousemove", (event) => {
-        setTooltipState((prev: any) => ({
+        setTooltipState((prev) => ({
           ...prev,
           x: event.pageX,
           y: event.pageY

src/features/dashboard/components/Worldmap.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import * as d3 from "d3";
 import useYearStore from "@/stores/useYearStore";
-import { DictionaryEntry, TooltipState } from "@/types";
+import { DictionaryEntry, TooltipStateSetter, WorldFeature, WorldGeo } from "@/types";
 import "./Worldmap.css";
 
 interface WorldmapProps {
   dictionaryData: DictionaryEntry[];
-  setTooltipState: (state: TooltipState | ((prev: TooltipState) => TooltipState)) => void;
-  worldGeo: any;
+  setTooltipState: TooltipStateSetter;
+  worldGeo: WorldGeo;
   isResizing: boolean;
 }
 
@@ -36,7 +36,9 @@ const Worldmap: React.FC<WorldmapProps> = ({ dictionaryData, setTooltipState, wo
       setDimensions({ width, height });
     });
 
-    resizeObserver.observe(container.parentElement!);
+    if (container.parentElement) {
+      resizeObserver.observe(container.parentElement);
+    }
 
     return () => resizeObserver.disconnect();
   }, [isResizing]);
@@ -53,7 +55,7 @@ const Worldmap: React.FC<WorldmapProps> = ({ dictionaryData, setTooltipState, wo
       .scale(dimensions.width / 6.2)
       .translate([dimensions.width / 2, dimensions.height / 1.5]);
 
-    const path = d3.geoPath().projection(projection);
+    const path = d3.geoPath<WorldFeature>().projection(projection);
 
     if (svg.select("defs").empty()) {
       const defs = svg.append("defs");
@@ -77,16 +79,14 @@ const Worldmap: React.FC<WorldmapProps> = ({ dictionaryData, setTooltipState, wo
 
     svg.call(zoom);
 
-    const countries = g.selectAll<SVGPathElement, any>(".country")
-      .data((worldGeo as any).features);
-
-    countries.enter()
-      .append("path")
+    g.selectAll<SVGPathElement, WorldFeature>(".country")
+      .data(worldGeo.features)
+      .join("path")
       .attr("class", "country")
-      .merge(countries as any)
-      .attr("d", path as any)
-      .attr("fill", (d: any) => {
+      .attr("d", path)
+      .attr("fill", (d) => {
         const name = d.properties.name_long || d.properties.name;
+        if (!name) return "url(#diagonalHatch)";
         const code = nameToCode[name];
         if (!code) return "url(#diagonalHatch)";
         if (countrySelection.includes(code)) {
@@ -96,16 +96,17 @@ const Worldmap: React.FC<WorldmapProps> = ({ dictionaryData, setTooltipState, wo
       })
       .attr("stroke", "#11111b")
       .attr("stroke-width", 0.5)
-      .classed("country-selectable", (d: any) => {
+      .classed("country-selectable", (d) => {
         const name = d.properties.name_long || d.properties.name;
-        return !!nameToCode[name];
+        return !!name && !!nameToCode[name];
       })
-      .classed("country-unselectable", (d: any) => {
+      .classed("country-unselectable", (d) => {
         const name = d.properties.name_long || d.properties.name;
-        return !nameToCode[name];
+        return !name || !nameToCode[name];
       })
-      .on("mouseover", function(event, d: any) {
+      .on("mouseover", function(event, d) {
         const name = d.properties.name_long || d.properties.name;
+        if (!name) return;
         const code = nameToCode[name];
         if (!code) return;
 
@@ -119,7 +120,7 @@ const Worldmap: React.FC<WorldmapProps> = ({ dictionaryData, setTooltipState, wo
         });
       })
       .on("mousemove", (event) => {
-        setTooltipState((prev: any) => ({
+        setTooltipState((prev) => ({
           ...prev,
           x: event.pageX,
           y: event.pageY
@@ -129,8 +130,9 @@ const Worldmap: React.FC<WorldmapProps> = ({ dictionaryData, setTooltipState, wo
         d3.select(this).style("stroke", "#11111b").style("stroke-width", 0.5);
         setTooltipState({ show: false, content: "", x: 0, y: 0 });
       })
-      .on("click", (event, d: any) => {
+      .on("click", (event, d) => {
         const name = d.properties.name_long || d.properties.name;
+        if (!name) return;
         const code = nameToCode[name];
         if (!code) return;
         toggleCountry(code, event.ctrlKey);

src/types/index.ts

@@ -1,3 +1,5 @@
+import type * as d3 from "d3";
+
 export type CountryCode = string;
 
 export interface OlympicRow {
@@ -17,6 +19,32 @@ export interface DictionaryEntry {
   CountryCode: CountryCode;
 }
 
+export interface PopulationRow {
+  CountryCode: CountryCode;
+  [year: string]: string | number;
+}
+
+export interface WorldFeature {
+  type: "Feature";
+  properties: {
+    name?: string;
+    name_long?: string;
+  };
+  geometry: d3.GeoGeometryObjects;
+}
+
+export interface WorldGeo {
+  type: "FeatureCollection";
+  features: WorldFeature[];
+}
+
+export interface OlympicsData {
+  dictionary: DictionaryEntry[];
+  country: OlympicRow[];
+  population: PopulationRow[];
+  worldGeo: WorldGeo;
+}
+
 export interface YearFilter {
   start: number;
   end: number;