Initial commit

bd6e225d · Almouhannad Hafez · bd6e225d · bd6e225d · bd6e225d · bd6e225d
Commit bd6e225d authored Feb 10, 2025 by Almouhannad Hafez
11 changed files
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
+# Olympic Games Dashboard
+
+## Project Details
+- Data Visualization (DV) Course - Final Mini Project
+    - Data Visualization using D3.js
+- By: Almouhannad Hafez
+
+## Table of Contents
+- [Introduction](#introduction)
+- [Features](#features)
+- [How to Run](#how-to-run)
+- [Technologies Used](#technologies-used)
+- [Contributing](#contributing)
+
+## Introduction
+This project is a comprehensive dashboard that visualizes data from the Olympic Games using D3.js. It aims to provide insights into various aspects of the games, including medal counts, athlete performances, and historical trends.
+
+## Features
+- Interactive visualizations of Olympic data
+- Filter options for different countries and events
+- Easy navigation and user-friendly interface
+- Reusable, clean, and self-documented code following design principles
+
+## How to Run
+To run this project locally, follow these steps:
+
+1. **Clone the repository**
+    ```bash
+    git clone https://git.hiast.edu.sy/almohanad.hafez/dv-project.git Olympic-games-dashboard
+    cd Olympic-games-dashboard
+    ```    
+
+2. **Install dependencies**    
+    ```bash
+    npm install
+    ```
+
+3. **Run the local server**
+    ```bash
+    npm run dev
+    ```
+
+4. **Open your browser** and navigate to `http://localhost:3000` to view the dashboard.
+
+## Technologies Used
+- **D3.js** for data visualization.
+- **Node.js** for the server.
+- **Vite** as the build tool and development server, offering fast hot module replacement and optimized builds for a smoother development experience.
+- **HTML/CSS** for the frontend.
+- **Bootstrap** for quick and easy styling of components.
+- **npm** for package management.
+
+## Contributing
+Contributions are welcome! If you would like to contribute to this project, please fork the repository and submit a pull request.
--- a/data/data.csv
+++ b/data/data.csv
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Olympic Games - Dashboard</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+</head>
+
+<body>
+
+  <div class="container">
+    <h1 class="text-center mt-5">Olympic Games Dashboard</h1>
+  </div>
+
+  <script type="module" src="/src/ts/main.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "olympic-games-dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.1.0"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "d3": "^7.9.0"
+  }
+}
\ No newline at end of file
--- a/public/favicon.svg
+++ b/public/favicon.svg
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-6 -6 72.00 72.00" xml:space="preserve" fill="#000000">
+<g id="SVGRepo_bgCarrier" stroke-width="0">
+<rect x="-6" y="-6" width="72.00" height="72.00" rx="36" fill="#ffffff" strokewidth="0"/>
+</g>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <path style="fill:#F3D55B;" d="M19.369,26.473c0.152-0.009,0.302-0.023,0.456-0.023c0.171,0,0.338,0.015,0.506,0.026 c-0.013-0.208-0.032-0.414-0.032-0.625c0-0.466,0.044-0.922,0.108-1.371c-0.194-0.012-0.386-0.03-0.583-0.03 c-0.18,0-0.356,0.017-0.534,0.027c0.064,0.45,0.109,0.906,0.109,1.373C19.4,26.06,19.382,26.266,19.369,26.473z"/> <path style="fill:#F3D55B;" d="M17.324,26.875c0.045-0.336,0.076-0.677,0.076-1.025c0-0.361-0.034-0.713-0.082-1.06 c-3.942,1.057-6.893,4.533-7.162,8.737c0.712-0.042,1.397-0.179,2.045-0.402C12.592,30.209,14.616,27.809,17.324,26.875z"/> <path style="fill:#F3D55B;" d="M19.825,41.85c-3.886,0-7.099-2.895-7.618-6.64c-0.635,0.17-1.294,0.276-1.973,0.313 c0.671,4.699,4.71,8.327,9.591,8.327c4.882,0,8.922-3.629,9.592-8.329c-0.678-0.041-1.337-0.149-1.971-0.323 C26.932,38.949,23.715,41.85,19.825,41.85z"/> <path style="fill:#F3D55B;" d="M22.38,24.802c-0.047,0.344-0.08,0.692-0.08,1.048c0,0.355,0.033,0.702,0.079,1.044 c2.675,0.945,4.673,3.323,5.067,6.212c0.648,0.229,1.334,0.372,2.048,0.419C29.225,29.339,26.297,25.874,22.38,24.802z"/> <path style="fill:#24AE5F;" d="M37.63,26.831c0.041-0.322,0.07-0.648,0.07-0.981c0-0.37-0.035-0.732-0.086-1.088 c-3.997,1.022-7.001,4.526-7.27,8.771c0.708-0.031,1.392-0.153,2.038-0.364C32.764,30.19,34.849,27.739,37.63,26.831z"/> <path style="fill:#24AE5F;" d="M42.686,26.938c2.602,0.968,4.539,3.299,4.941,6.124c0.649,0.241,1.337,0.399,2.054,0.457 c-0.269-4.145-3.144-7.584-7.006-8.689c-0.045,0.335-0.076,0.673-0.076,1.02C42.6,26.22,42.635,26.581,42.686,26.938z"/> <path style="fill:#24AE5F;" d="M40.013,41.85c-3.876,0-7.083-2.881-7.614-6.612c-0.637,0.163-1.297,0.262-1.976,0.291 c0.673,4.696,4.711,8.321,9.591,8.321c4.884,0,8.926-3.632,9.593-8.335c-0.678-0.048-1.336-0.164-1.968-0.345 C47.136,38.934,43.912,41.85,40.013,41.85z"/> <path style="fill:#24AE5F;" d="M39.669,26.467c0.115-0.005,0.228-0.017,0.344-0.017c0.209,0,0.414,0.015,0.619,0.031 c-0.014-0.21-0.032-0.418-0.032-0.631c0-0.465,0.044-0.918,0.108-1.365c-0.23-0.016-0.46-0.035-0.694-0.035 c-0.143,0-0.281,0.015-0.422,0.021c0.065,0.452,0.11,0.91,0.11,1.379C39.7,26.058,39.682,26.262,39.669,26.467z"/> <path style="fill:#0096E6;" d="M19.369,26.473c-0.712,0.042-1.397,0.179-2.045,0.402c-0.39,2.916-2.415,5.316-5.123,6.25 c-0.045,0.336-0.076,0.677-0.076,1.025c0,0.361,0.034,0.713,0.082,1.06C16.148,34.153,19.1,30.677,19.369,26.473z"/> <path style="fill:#0096E6;" d="M10.157,33.527C10.005,33.536,9.854,33.55,9.7,33.55c-4.246,0-7.7-3.454-7.7-7.7s3.454-7.7,7.7-7.7 c3.886,0,7.099,2.895,7.618,6.64c0.635-0.17,1.294-0.276,1.973-0.313c-0.671-4.699-4.71-8.327-9.591-8.327 c-5.349,0-9.7,4.352-9.7,9.7s4.352,9.7,9.7,9.7c0.18,0,0.356-0.017,0.534-0.027c-0.064-0.45-0.109-0.906-0.109-1.373 C10.125,33.94,10.143,33.734,10.157,33.527z"/> <path style="fill:#F3D55B;" d="M12.125,34.15c0-0.348,0.031-0.689,0.076-1.025c-0.647,0.223-1.333,0.36-2.045,0.402 c-0.013,0.207-0.032,0.413-0.032,0.623c0,0.467,0.045,0.923,0.109,1.373c0.679-0.037,1.338-0.143,1.973-0.313 C12.159,34.862,12.125,34.51,12.125,34.15z"/> <path style="fill:#0096E6;" d="M17.4,25.85c0,0.348-0.031,0.689-0.076,1.025c0.647-0.223,1.333-0.36,2.045-0.402 c0.013-0.207,0.032-0.413,0.032-0.623c0-0.467-0.045-0.923-0.109-1.373c-0.679,0.037-1.338,0.143-1.973,0.313 C17.367,25.138,17.4,25.49,17.4,25.85z"/> <path style="fill:#38454F;" d="M30,18.15c3.876,0,7.083,2.881,7.614,6.612c0.637-0.163,1.297-0.262,1.976-0.291 C38.917,19.775,34.879,16.15,30,16.15c-4.882,0-8.922,3.629-9.592,8.329c0.678,0.041,1.337,0.149,1.971,0.323 C22.894,21.051,26.11,18.15,30,18.15z"/> <path style="fill:#38454F;" d="M39.669,26.467c-0.708,0.031-1.392,0.153-2.038,0.364c-0.381,2.979-2.466,5.43-5.248,6.338 c-0.041,0.322-0.07,0.648-0.07,0.981c0,0.37,0.035,0.732,0.086,1.088C36.396,34.215,39.4,30.712,39.669,26.467z"/> <path style="fill:#38454F;" d="M30.344,33.533C30.229,33.538,30.116,33.55,30,33.55c-0.171,0-0.338-0.015-0.506-0.026 c0.013,0.208,0.032,0.414,0.032,0.625c0,0.466-0.044,0.922-0.108,1.371c0.194,0.012,0.386,0.03,0.583,0.03 c0.143,0,0.281-0.015,0.422-0.021c-0.065-0.452-0.11-0.91-0.11-1.379C30.312,33.942,30.331,33.738,30.344,33.533z"/> <path style="fill:#38454F;" d="M22.379,26.894c-0.648-0.229-1.334-0.372-2.048-0.419c0.269,4.186,3.197,7.65,7.114,8.722 c0.047-0.344,0.08-0.692,0.08-1.048c0-0.355-0.033-0.702-0.079-1.044C24.771,32.161,22.773,29.783,22.379,26.894z"/> <path style="fill:#38454F;" d="M29.494,33.525c-0.714-0.047-1.4-0.19-2.048-0.419c0.047,0.342,0.079,0.689,0.079,1.044 c0,0.356-0.033,0.704-0.08,1.048c0.634,0.174,1.293,0.282,1.971,0.323c0.064-0.449,0.108-0.904,0.108-1.371 C29.525,33.939,29.507,33.732,29.494,33.525z"/> <path style="fill:#F3D55B;" d="M20.331,26.475c0.714,0.047,1.4,0.19,2.048,0.419c-0.047-0.342-0.079-0.689-0.079-1.044 c0-0.356,0.033-0.704,0.08-1.048c-0.634-0.174-1.293-0.282-1.971-0.323c-0.064,0.449-0.108,0.904-0.108,1.371 C20.3,26.061,20.318,26.268,20.331,26.475z"/> <path style="fill:#24AE5F;" d="M32.312,34.15c0-0.333,0.028-0.659,0.07-0.981c-0.646,0.211-1.33,0.333-2.038,0.364 c-0.013,0.205-0.031,0.409-0.031,0.617c0,0.469,0.045,0.927,0.11,1.379c0.68-0.029,1.34-0.128,1.976-0.291 C32.348,34.881,32.312,34.52,32.312,34.15z"/> <path style="fill:#38454F;" d="M37.7,25.85c0,0.333-0.028,0.659-0.07,0.981c0.646-0.211,1.33-0.333,2.038-0.364 c0.013-0.205,0.031-0.409,0.031-0.617c0-0.469-0.045-0.927-0.11-1.379c-0.68,0.029-1.34,0.128-1.976,0.291 C37.665,25.119,37.7,25.48,37.7,25.85z"/> <path style="fill:#E64C3C;" d="M50.3,16.15c-4.884,0-8.926,3.632-9.593,8.335c0.678,0.048,1.336,0.164,1.968,0.345 c0.502-3.764,3.725-6.68,7.625-6.68c4.246,0,7.7,3.454,7.7,7.7s-3.454,7.7-7.7,7.7c-0.209,0-0.414-0.015-0.619-0.031 c0.014,0.21,0.032,0.418,0.032,0.631c0,0.465-0.044,0.918-0.108,1.365c0.23,0.016,0.46,0.035,0.694,0.035c5.349,0,9.7-4.352,9.7-9.7 S55.648,16.15,50.3,16.15z"/> <path style="fill:#E64C3C;" d="M42.686,26.938c-0.649-0.241-1.337-0.399-2.054-0.457c0.269,4.145,3.144,7.584,7.006,8.689 c0.045-0.335,0.076-0.673,0.076-1.02c0-0.37-0.035-0.731-0.086-1.088C45.025,32.094,43.088,29.763,42.686,26.938z"/> <path style="fill:#E64C3C;" d="M49.681,33.519c-0.717-0.057-1.405-0.215-2.054-0.457c0.051,0.356,0.086,0.718,0.086,1.088 c0,0.347-0.031,0.685-0.076,1.02c0.632,0.181,1.29,0.297,1.968,0.345c0.063-0.447,0.108-0.901,0.108-1.365 C49.713,33.937,49.695,33.729,49.681,33.519z"/> <path style="fill:#24AE5F;" d="M40.632,26.481c0.717,0.057,1.405,0.215,2.054,0.457C42.635,26.581,42.6,26.22,42.6,25.85 c0-0.347,0.031-0.685,0.076-1.02c-0.632-0.181-1.29-0.297-1.968-0.345c-0.063,0.447-0.108,0.901-0.108,1.365 C40.6,26.063,40.618,26.271,40.632,26.481z"/> </g>
+</svg>
\ No newline at end of file
--- a/src/css/style.css
+++ b/src/css/style.css
+@import 'bootstrap/dist/css/bootstrap.min.css';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
+
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  background: #f7f7f7;
+}
\ No newline at end of file
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
+import '/src/css/style.css';
+import 'bootstrap';
\ No newline at end of file
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src"
+  ]
+}
\ No newline at end of file