impact dist per country v2

assets/scripts/distribution.js

@@ -7,6 +7,20 @@ const eventColors = {
 
 // Load the CSV file
 d3.csv('data/modified_data.csv').then(function(data) {
+    // Unique countries for dropdown
+    const countries = Array.from(new Set(data.map(d => d.Country))).sort();
+    const countryDropdown = document.getElementById('countryDropdown');
+    let defaultOption = document.createElement('option');
+    defaultOption.text = "Select a country";
+    defaultOption.value = "";
+    countryDropdown.appendChild(defaultOption);
+
+    countries.forEach(country => {
+        let option = document.createElement('option');
+        option.value = country;
+        option.text = country;
+        countryDropdown.appendChild(option);
+    });
     // Filter out invalid data and future years
     data = data.filter(d => {
         const year = parseInt(d.Year);
@@ -85,14 +99,64 @@ d3.csv('data/modified_data.csv').then(function(data) {
     slider.addEventListener('input', function() {
         const maxYear = +this.value;
         const minYear = maxYear - 100;
-        x.domain([minYear, maxYear]);
-        xAxis.call(d3.axisBottom(x).tickFormat(d3.format("d")));
-        const filteredData = yearData.filter(d => d.year >= minYear && d.year <= maxYear);
-        drawLines(filteredData);
+
+        updateVisualization(currentCountry, minYear, maxYear);
         document.getElementById('rangeDisplay').innerText = `${minYear} - ${maxYear}`;
     });
+
+    // Event listener for the dropdown
+    let currentCountry = null; // This will store the currently selected country
+
+    countryDropdown.addEventListener('change', function() {
+        currentCountry = this.value;
+        updateVisualization(currentCountry);
+    });
+
+    function updateVisualization(selectedCountry = null, minYear = 700, maxYear = 2023) {
+        // Filter data based on country if selected, else use whole dataset
+        let filteredData = selectedCountry ? data.filter(d => d.Country === selectedCountry) : data;
+
+        // Further filter the data based on the year range
+        filteredData = filteredData.filter(d => {
+            const year = parseInt(d.Year);
+            return year >= minYear && year <= maxYear;
+        });
+
+        // Process the data similarly as before
+        const countsByYear = d3.rollups(filteredData, v => v.length, d => d.Year, d => d.Outcome);
+        const yearData = countsByYear.map(([year, outcomes]) => {
+            const yearObj = { year: parseInt(year) };
+            outcomes.forEach(([outcome, count]) => {
+                yearObj[outcome] = count;
+            });
+            return yearObj;
+        });
+
+        yearData.sort((a, b) => a.year - b.year);
+
+        // Update the domain for the x-axis and redraw the lines
+        x.domain([minYear, maxYear]);
+        xAxis.call(d3.axisBottom(x).tickFormat(d3.format("d")));
+
+        drawLines(yearData);
+    }
+
+
+
+// You will need to update the existing slider and drawing logic to accommodate dynamic changes.
+
 }).catch(function(error) {
     console.error("Error loading or processing data:", error);
 });
 
 
+
+
+
+
+
+
+
+
+
+

index.html

@@ -160,21 +160,28 @@ <h1 class="title">Impact Analysis</h1>
 
          <!-- Section 7: Distribution -->
 
-        <div class="section" id="distribution" style="padding: 20px;">
-            <h1 class="title" style="text-align: center;">Outcome of events of different populations</h1>
+         <div class="section" id="distribution" style="padding: 20px;">
+            <style>
+                .title {
+                    text-align: center;
+                    font-size: 24px; /* Size of the font */
+                    font-family: 'Arial', sans-serif; /* Font family */
+                }
+            </style>
+            <h1 class="title" style="text-align: center;">Outcome of events on population over time</h1>
+            <div style="text-align: center; margin-bottom: 20px;">
+                <select id="countryDropdown">
+                    <option value="" disabled selected>Select a country</option>
+                </select>
+            </div>
             <div class="section-content" style="display: flex; justify-content: space-between; align-items: flex-start;">
-                <div style="flex: 1; padding-right: 20px;">
-                    <p>This interactive visualization shows the evolution of positive, negative, and mixed events over time. Use the slider to adjust the range of years displayed on the graph and observe how the occurrence of different event types has changed from 1600 to 2000.</p>
-                </div>
                 <div style="flex: 1;">
-                    <svg id="impact_analysis" width="300" height="200"></svg>
+                    <svg id="impact_analysis" width="600" height="400"></svg>
                     <input type="range" id="yearRangeSlider" min="1800" max="2000" value="2000" class="slider" step="1" style="width: 100%; margin-top: 10px;">
                     <span id="rangeDisplay">1800 - 2000</span>
                 </div>
             </div>
-        </div>
-
-
+        </div>        
 
         <!-- Section 8: Explaination Race-->
         <div class="section" id="exp_race">