Homework 2 – Visualization Dashboard (ECS 272)

Homework2/hsdsingh/README.md

@@ -0,0 +1,54 @@
+# Homework 2 – Visualization Dashboard (ECS 272)
+
+## Overview
+This project presents a web-based visualization dashboard for exploring the **Paris 2024 Olympic Games** dataset.  
+The dashboard follows a **focus + context** design paradigm, guiding users from a global overview of medal distribution to sport-level patterns and detailed medal flows.
+
+## Dataset
+The dashboard uses the official Paris 2024 Olympic datasets provided for the assignment, including:
+- Country-level medal totals
+- Sport-specific final results (multiple CSV files)
+- Medal types (Gold, Silver, Bronze)
+
+All data is loaded statically from CSV files.
+
+## Dashboard Design
+The dashboard is organized into three coordinated views within a single fullscreen layout:
+
+### 1. Overview
+**Stacked Bar Chart**  
+Shows medal distribution for the top countries, stacked by medal type (Gold, Silver, Bronze).  
+This view provides a high-level comparison of overall Olympic performance.
+
+### 2. Context
+**Heatmap (Country × Sport)**  
+Displays how medals are distributed across sports for top-performing countries.  
+This view reveals country specialization and sport-level patterns.
+
+### 3. Focus
+**Sankey Diagram (Advanced Visualization)**  
+Illustrates the flow of medals from **Countries → Sports → Medal Types**, highlighting structural relationships in Olympic success.
+
+## Visualization Techniques
+- Stacked bar chart
+- Heatmap (matrix view)
+- Sankey diagram (advanced visualization)
+
+All visualizations are implemented using **D3.js** and are fully responsive.
+
+## Interaction
+- Hover tooltips on all charts
+- Hover highlighting for bar chart rows, heatmap cells, and Sankey nodes/links
+- Dropdown control to adjust the number of countries displayed in the overview chart
+
+## Design Considerations
+- Single fullscreen dashboard with no scrolling
+- Consistent color encoding for medal types
+- Subtle pale background and card layout for readability
+- Clear titles, axes, legends, and labels
+
+## How to Run
+```bash
+npm install
+npm run dev
+```

Homework2/hsdsingh/React-Template/README.md

@@ -0,0 +1,26 @@
+# More about the Framework
+
+
+This is a template in React and TypeScript. React has a steeper learning curve than Vue.js because it requires understanding JSX syntax and concepts like hooks and component lifecycle.
+
+If you want to use React but not with TypeScript, just remove any type specifications from the `Example.tsx`, `Notes.tsx`, and `NotesWithReducer.tsx`. You can always refer to `VanillaJS-Template/example.js` for this migration.
+
+
+## Files You Have to Care about
+
+`package.json` is where we manage the libraries we installed. Besides this, most of the files you can ignore, but **the files under `./src/` are your concern**.
+
+* `./src/main.tsx` is the root script file for React that instatinates our single page application.
+* `./src/App.tsx` is the root file for all **development** needs and is also where we manage the layout and load in components.
+* `./src/types.ts` is usually where we declare our customized types if you're planning to use it.
+* `./src/stores/` is where we manage the stores if you're planning to use it. The store is responsible for global state management.
+* `./src/components/` is where we create the components. You may have multiple components depends on your design.
+  * `Example.tsx` shows how to read `.csv` and `.json`, how component size is being watched, how a bar chart is created, and how the component updates if there are any changes. 
+  * `Notes.tsx` shows the difference of **state** and **prop**, how to use MUI, and how a local state updates based on interaction.
+  * `NotesWithReducer.tsx` is equivalent to `Notes.tsx`, excepts it uses store called reducer.
+
+## Libraries Installed in this Framework
+ * D3.js v7 for visualization
+ * [axios](https://axios-http.com/docs/intro) for API.
+ * [Material UI](https://mui.com/material-ui/getting-started/) for UI components.
+ * [lodash](https://lodash.com/) for utility functions in JavaScript.

Homework2/hsdsingh/React-Template/data/archive/Cycling BMX Freestyle.csv

@@ -0,0 +1,43 @@
+date,stage_code,event_code,event_name,event_stage,stage,gender,discipline_name,discipline_code,venue,participant_code,participant_name,participant_type,participant_country_code,participant_country,rank,result,result_type,qualification_mark,start_order
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1912548,REILLY Kieran Darren David,Person,GBR,Great Britain,1.0,91.21,POINTS,Q,5
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1955074,CHRISTOPHER Marcus,Person,USA,United States,2.0,89.48,POINTS,Q,6
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1940117,MARTIN Logan,Person,AUS,Australia,3.0,89.39,POINTS,Q,4
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1955078,DOWELL Justin,Person,USA,United States,4.0,89.07,POINTS,Q,4
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1895685,JEANJEAN Anthony,Person,FRA,France,5.0,87.58,POINTS,Q,6
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1945766,NAKAMURA Rimu,Person,JPN,Japan,6.0,87.03,POINTS,Q,2
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1916809,TORRES GIL Jose,Person,ARG,Argentina,7.0,86.66,POINTS,Q,5
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1953471,BATISTA de OLIVEIRA Gustavo,Person,BRA,Brazil,8.0,85.79,POINTS,Q,1
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1947927,ZEBOLDS Ernests,Person,LAT,Latvia,9.0,84.94,POINTS,Q,3
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1966681,WHALEY Jeffrey,Person,CAN,Canada,10.0,78.51,POINTS,,2
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1894361,RANTES Marin,Person,CRO,Croatia,11.0,76.29,POINTS,,3
+2024-07-30T16:39:52+02:00,BMFMINDVFRST----------QUAL--------,BMFMINDVFRST,Men's Park,Men's Park Qualification,Qualification,M,Cycling BMX Freestyle,BMF,La Concorde 2,1943608,LEYGONIE Vincent,Person,RSA,South Africa,12.0,75.85,POINTS,,1
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1916809,TORRES GIL Jose,Person,ARG,Argentina,1.0,94.82,POINTS,,3
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1912548,REILLY Kieran Darren David,Person,GBR,Great Britain,2.0,93.91,POINTS,,9
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1895685,JEANJEAN Anthony,Person,FRA,France,3.0,93.76,POINTS,,5
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1955074,CHRISTOPHER Marcus,Person,USA,United States,4.0,93.11,POINTS,,8
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1945766,NAKAMURA Rimu,Person,JPN,Japan,5.0,90.89,POINTS,,4
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1953471,BATISTA de OLIVEIRA Gustavo,Person,BRA,Brazil,6.0,90.20,POINTS,,2
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1955078,DOWELL Justin,Person,USA,United States,7.0,88.35,POINTS,,6
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1947927,ZEBOLDS Ernests,Person,LAT,Latvia,8.0,87.14,POINTS,,1
+2024-07-31T15:27:30+02:00,BMFMINDVFRST----------FNL-000100--,BMFMINDVFRST,Men's Park,Men's Park Final,Final,M,Cycling BMX Freestyle,BMF,La Concorde 2,1940117,MARTIN Logan,Person,AUS,Australia,9.0,64.40,POINTS,,7
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1955100,ROBERTS Hannah,Person,USA,United States,1.0,91.45,POINTS,Q,6
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1920569,DENG Yawen,Person,CHN,China,2.0,91.03,POINTS,Q,5
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1920571,SUN Jiaqi,Person,CHN,China,3.0,87.83,POINTS,Q,2
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1955071,BENEGAS Perris,Person,USA,United States,4.0,85.44,POINTS,Q,1
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1946324,MICULYCOVA Iveta,Person,CZE,Czechia,5.0,84.46,POINTS,Q,5
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1543494,VILLEGAS SERNA Queen Saray,Person,COL,Colombia,6.0,84.42,POINTS,Q,3
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1934346,PEREZ GRASSET Macarena,Person,CHI,Chile,7.0,84.24,POINTS,Q,4
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1940118,DIEHM Natalya,Person,AUS,Australia,8.0,83.89,POINTS,Q,1
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1895709,PEREZ Laury,Person,FRA,France,9.0,83.26,POINTS,Q,3
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1976500,DUCARROZ Nikita,Person,SUI,Switzerland,10.0,79.78,POINTS,,6
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1912576,WORTHINGTON Charlotte Elizabeth,Person,GBR,Great Britain,11.0,79.01,POINTS,,2
+2024-07-30T14:50:53+02:00,BMFWINDVFRST----------QUAL--------,BMFWINDVFRST,Women's Park,Women's Park Qualification,Qualification,W,Cycling BMX Freestyle,BMF,La Concorde 2,1889764,MUELLER Kim Lea,Person,GER,Germany,12.0,77.95,POINTS,,4
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1920569,DENG Yawen,Person,CHN,China,1.0,92.60,POINTS,,8
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1955071,BENEGAS Perris,Person,USA,United States,2.0,90.70,POINTS,,6
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1940118,DIEHM Natalya,Person,AUS,Australia,3.0,88.80,POINTS,,2
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1543494,VILLEGAS SERNA Queen Saray,Person,COL,Colombia,4.0,88.00,POINTS,,4
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1934346,PEREZ GRASSET Macarena,Person,CHI,Chile,5.0,84.55,POINTS,,3
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1946324,MICULYCOVA Iveta,Person,CZE,Czechia,6.0,82.30,POINTS,,5
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1920571,SUN Jiaqi,Person,CHN,China,7.0,70.80,POINTS,,7
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1955100,ROBERTS Hannah,Person,USA,United States,8.0,70.00,POINTS,,9
+2024-07-31T14:01:20+02:00,BMFWINDVFRST----------FNL-000100--,BMFWINDVFRST,Women's Park,Women's Park Final,Final,W,Cycling BMX Freestyle,BMF,La Concorde 2,1895709,PEREZ Laury,Person,FRA,France,9.0,64.30,POINTS,,1