Fix charts ids

index.html

@@ -30,7 +30,7 @@
             <div class="chart-description">
               This chart shows the distribution of medals won by different countries in the Olympic Games.
             </div>
-            <div id="medalDistributionChart"></div>
+            <div id="medalDistributionByCountryChart"></div>
           </div>
         </div>
       </div>
@@ -49,7 +49,7 @@
               This chart illustrates the trend of total medals won over time, highlighting the changes in performance
               across various Olympic Games.
             </div>
-            <div id="medalsTrendByTimeChart"></div>
+            <div id="medalDistributionByTimeChart"></div>
           </div>
         </div>
       </div>
@@ -58,22 +58,23 @@
         <h2 class="accordion-header" id="headingThree">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-            Medal Distribution by Country
+            Medal Distribution by Gender
           </button>
         </h2>
         <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
           data-bs-parent="#olympicStatsAccordion">
           <div class="accordion-body">
             <div class="chart-description">
-              This chart shows the distribution of medals won by different countries in the Olympic Games.
+              This chart shows the distribution of medals won by over genders.
             </div>
-            <canvas id="sportsParticipationChart"></canvas>
+            <canvas id="medalDistributionByGenderChart"></canvas>
           </div>
         </div>
       </div>
 
     </div>
   </div>
+
   <script type="module" src="/src/ts/main.ts"></script>
 </body>
 

src/ts/charts-helpers/multi-line-chart-helper.ts

@@ -56,7 +56,7 @@ export class MultiLineChartHelper {
 
     public appendChart() {
         // Add div container
-        this.container = d3.select('#medalsTrendByTimeChart')
+        this.container = d3.select('#medalDistributionByTimeChart')
             .append('div')
             .attr('class', 'container')
             .attr('style', 'width: fit-content;')

src/ts/charts-helpers/stacked-bar-chart-helper.ts

@@ -51,7 +51,7 @@ export class StackedBarChartHelper {
 
     public appendChart() {
         // Add div container
-        this.container = d3.select('#medalDistributionChart')
+        this.container = d3.select('#medalDistributionByCountryChart')
             .append('div')
             .attr('class', 'container') // bootstrap
             .attr('style', 'width: fit-content;')