Merge pull request #2 from com-480-data-visualization/lea-dev

Lea dev

data/host_cities.csv

@@ -0,0 +1,53 @@
+City,Year,Season
+Albertville,1992,Winter
+Amsterdam,1928,Summer
+Antwerpen,1920,Summer
+Athina,1896,Summer
+Athina,1906,Summer
+Athina,2004,Summer
+Atlanta,1996,Summer
+Barcelona,1992,Summer
+Beijing,2008,Summer
+Berlin,1936,Summer
+Calgary,1988,Winter
+Chamonix,1924,Winter
+Cortina d'Ampezzo,1956,Winter
+Garmisch-Partenkirchen,1936,Winter
+Grenoble,1968,Winter
+Helsinki,1952,Summer
+Innsbruck,1964,Winter
+Innsbruck,1976,Winter
+Lake Placid,1932,Winter
+Lake Placid,1980,Winter
+Lillehammer,1994,Winter
+London,1908,Summer
+London,1948,Summer
+London,2012,Summer
+Los Angeles,1932,Summer
+Los Angeles,1984,Summer
+Melbourne,1956,Summer
+Mexico City,1968,Summer
+Montreal,1976,Summer
+Moskva,1980,Summer
+Munich,1972,Summer
+Nagano,1998,Winter
+Oslo,1952,Winter
+Paris,1900,Summer
+Paris,1924,Summer
+Rio de Janeiro,2016,Summer
+Roma,1960,Summer
+Salt Lake City,2002,Winter
+Sankt Moritz,1928,Winter
+Sankt Moritz,1948,Winter
+Sapporo,1972,Winter
+Sarajevo,1984,Winter
+Seoul,1988,Summer
+Sochi,2014,Winter
+Squaw Valley,1960,Winter
+St. Louis,1904,Summer
+Stockholm,1912,Summer
+Stockholm,1956,Summer
+Sydney,2000,Summer
+Tokyo,1964,Summer
+Torino,2006,Winter
+Vancouver,2010,Winter

data/host_cities_lon_lat.csv

@@ -0,0 +1,52 @@
+City,Country,NOC,Summer,Winter,Year,Latitude,Longitude, x, y
+Athens,Greece,GRE,I,,1896,37.9833333,23.7333336,1111,257
+Paris,France,FRA,II,,1900,48.85341,2.3487999,997,189
+St. Louis,United States,USA,III,,1904,38.6272733,-90.1978912,511,253
+London,United Kingdom,GBR,IV,,1908,51.5084153,-0.1255327,985,172
+Stockholm,Sweden,SWE,V,,1912,59.3325765,18.0649033,1068,125
+Antwerp,Belgium,BEL,VII,,1920,51.2166667,4.4166665,1007,174
+Chamonix,France,FRA,,I,1924,45.9237,6.8694,1021,207
+Paris,France,FRA,VIII,,1924,48.85341,2.3487999,997,189
+St. Moritz,Switzerland,SUI,,II,1928,46.4908,9.8355,1035,203
+Amsterdam,Netherlands,NED,IX,,1928,52.3075,4.9722219,1010,167
+Lake Placid,United States,USA,,III,1932,27.2931,-81.362846,540,326
+Los Angeles,United States,USA,X,,1932,34.0522342,-118.2436829,351,283
+Garmisch-Partenkirchen,Nazi Germany,GER,,IV,1936,47.49209,11.09576,1041,197
+Berlin,Nazi Germany,GER,XI,,1936,52.5166667,13.3999996,1051,166
+St. Moritz,Switzerland,SUI,,V,1948,46.4908,9.8355,1035,203
+London,United Kingdom,GBR,XIV,,1948,51.5084153,-0.1255327,985,172
+Oslo,Norway,NOR,,VI,1952,60.1755556,24.934166,1099,120
+Helsinki,Finland,FIN,XV,,1952,60.1699,24.9384,1099,120
+Cortina d'Ampezzo,Italy,ITA,,VII,1956,46.5405,12.1357,1047,203
+Melbourne,Australia,AUS,XVI,,1956,-37.8139966,144.9633179,1751,744
+Stockholm,Sweden,SWE,XVI,,1956,59.3325765,18.0649033,1068,125
+Squaw Valley,United States,USA,,VIII,1960,39.1963,-120.2336,355,249
+Rome,Italy,ITA,XVII,,1960,41.9,12.4833336,1050,232
+Innsbruck,Austria,AUT,,IX,1964,47.2666667,11.3999996,1043,199
+Tokyo,Japan,JPN,XVIII,,1964,35.6895266,139.6916809,1730,272
+Grenoble,France,FRA,,X,1968,45.1666667,5.7166667,1015,212
+Mexico City,Mexico,MEX,XIX,,1968,19.4341667,-99.1386108,433,377
+Sapporo,Japan,JPN,,XI,1972,43.0547222,141.3538818,1712,225
+Munich,West Germany,GER,XX,,1972,48.1351,11.582,1044,193
+Innsbruck,Austria,AUT,,XII,1976,47.2666667,11.3999996,1043,199
+Montreal,Canada,CAN,XXI,,1976,45.5167792,-73.6491776,613,210
+Lake Placid,United States,USA,,XIII,1980,27.2931,-81.362846,540,326
+Moscow,Soviet Union,RUS,XXII,,1980,55.7522222,37.6155548,1163,146
+Sarajevo,Yugoslavia,RUS,,XIV,1984,43.85,18.3833332,1080,220
+Los Angeles,United States,USA,XXIII,,1984,34.0522342,-118.2436829,351,283
+Calgary,Canada,CAN,,XV,1988,51.0501123,-114.085289,429,175
+Seoul,South Korea,KOR,XXIV,,1988,37.5663889,126.9997253,1657,260
+Albertville,France,FRA,,XVI,1992,45.6755,6.3927,1018,209
+Barcelona,Spain,ESP,XXV,,1992,41.3887869,2.1589851,997,235
+Lillehammer,Norway,NOR,,XVII,1994,61.1153,10.4662,1033,114
+Atlanta,United States,USA,XXVI,,1996,33.7489954,-84.3879852,533,285
+Nagano,Japan,JPN,,XVIII,1998,36.65,138.1833344,1719,266
+Sydney,Australia,AUS,XXVII,,2000,-33.86785,151.2073212,1798,719
+Salt Lake City,United States,USA,,XIX,2002,40.758701,-111.876183,404,239
+Athens,Greece,GRE,XXVIII,,2004,37.9833333,23.7333336,1111,257
+Turin,Italy,ITA,,XX,2006,45.0703,7.6869,1025,212
+Beijing,China,CHN,XXIX,,2008,39.9074977,116.3972244,1595,245
+Vancouver,Canada,CAN,,XXI,2010,49.2496574,-123.119339,377,186
+London,United Kingdom,GBR,XXX,,2012,51.5084153,-0.1255327,985,172
+Sochi,Russia,RUS,,XXII,2014,43.6,39.730278,1189,222
+Rio de Janeiro,Brazil,BRA,XXXI,,2016,-22.9027778,-43.2075005,747,648

index.html

@@ -5,9 +5,13 @@
     <meta name="viewport" content="width=device-width" />
     <title>Olympic Games</title>
     <link rel="stylesheet" href="styles/index.css" />
+
+    <script src="scripts/mapdata.js"></script> 
+    <script  src="scripts/worldmap.js"></script>
+    <script  src="scripts/initializeMap.js"></script>
+
   </head>
   <body>
-
     <div class="center">
       <img src="images/olympic_symbole.png" alt="Logo of the Olympics" class="logo-image">
     </div>
@@ -18,9 +22,10 @@ <h1> Ring of Time : An Olympic Legacy </h1>
       <a href="pages/disciplines.html">Olympic Disciplines</a>
       <a href="pages/history.html">History</a>
       <a href="pages/about_us.html">About Us</a>
-
     </div>
+
+    <!-- Container pour la carte SVG -->
+    <div id="mapContainer" style="width: 100%; height: 500px;"></div>
 
-    <img src="images/world.svg" alt="World Map SVG" width="100%" height="100%">
   </body>
 </html>

scripts/initializeMap.js

@@ -0,0 +1,111 @@
+function drawSVGPaths() {
+  const paths = window.simplemaps_worldmap_mapinfo.paths;
+  const locations = window.simplemaps_worldmap_mapdata.locations;
+
+  const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svgElement.setAttribute("viewBox", "0 0 2000 1000");
+  svgElement.style.width = "100%";
+  svgElement.style.height = "auto";
+
+  const defaultColor = '#ffffff';
+  const hoverColor = '#ccc';
+
+  for (const country in paths) {
+    const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    pathElement.setAttribute("d", paths[country]);
+    pathElement.setAttribute("fill", defaultColor);
+    pathElement.setAttribute("stroke", "black");
+    pathElement.setAttribute("stroke-width", "2");
+
+    pathElement.addEventListener('mouseover', function(event) {
+      pathElement.setAttribute('fill', hoverColor); 
+    });
+
+    pathElement.addEventListener('mouseout', function(event) {
+      pathElement.setAttribute('fill', defaultColor); 
+    });
+
+    svgElement.appendChild(pathElement);
+  }
+
+  for (const city in locations) {
+    const cityCoords = locations[city];
+    const circleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circleElement.setAttribute("cx", cityCoords.x);
+    circleElement.setAttribute("cy", cityCoords.y);
+    circleElement.setAttribute("r", "10");
+
+    const fillColor = cityCoords.winter === 0 ? "orange" : "blue";
+    circleElement.setAttribute("fill", fillColor);
+    circleElement.setAttribute("data-name", cityCoords.name);
+    circleElement.setAttribute("data-year", cityCoords.year);
+    circleElement.setAttribute("data-country", cityCoords.country);
+
+    circleElement.addEventListener('click', (event) => {
+      document.querySelectorAll('.tooltip').forEach(tooltip => tooltip.remove());
+
+      const tooltip = document.createElement('div');
+      tooltip.style.position = 'absolute';
+      tooltip.style.left = `${event.pageX + 10}px`;
+      tooltip.style.top = `${event.pageY + 10}px`;
+      tooltip.className = 'tooltip';
+
+      const cityCountrySpan = document.createElement('span');
+      cityCountrySpan.className = 'city-country';
+      cityCountrySpan.textContent = `${event.target.getAttribute('data-name')}, ${event.target.getAttribute('data-country')}`;
+
+      const yearSpan = document.createElement('span');
+      yearSpan.className = 'year';
+      yearSpan.textContent = `${event.target.getAttribute('data-year')}`;
+
+      tooltip.appendChild(cityCountrySpan);
+      tooltip.appendChild(document.createElement('br'));
+      tooltip.appendChild(yearSpan);
+
+      document.body.appendChild(tooltip);
+      setTimeout(() => { tooltip.classList.add('show'); }, 10);
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!event.target.closest('circle')) {
+          document.querySelectorAll('.tooltip').forEach(tooltip => {
+              tooltip.classList.remove('show');
+              setTimeout(() => { tooltip.remove(); }, 300);
+          });
+      }
+    });
+
+    svgElement.appendChild(circleElement);
+  }
+
+  const legendContainer = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  legendContainer.setAttribute("transform", "translate(50, 900)");
+
+  const createLegendItem = (cx, cy, fill, text) => {
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute("cx", cx);
+    circle.setAttribute("cy", cy);
+    circle.setAttribute("r", "15");
+    circle.setAttribute("fill", fill);
+
+    const textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    textElement.setAttribute("x", cx + 30);
+    textElement.setAttribute("y", cy + 5);
+    textElement.textContent = text;
+    textElement.style.fill = "#333";
+    textElement.style.fontSize = "20px"; 
+    textElement.style.fontWeight = "bold"; 
+
+    legendContainer.appendChild(circle);
+    legendContainer.appendChild(textElement);
+  };
+
+  createLegendItem(20, 20, "orange", "Summer Olympics");
+  createLegendItem(20, 60, "blue", "Winter Olympics");
+
+  svgElement.appendChild(legendContainer);
+
+  document.getElementById("mapContainer").appendChild(svgElement);
+}
+
+document.addEventListener("DOMContentLoaded", drawSVGPaths);