First working version Globe

style.css → assets/css/style.css

@@ -11,7 +11,7 @@ body {
     font-family: 'Arial', sans-serif;
     font-size: 1rem;
     line-height: 1.6;
-    color: #333;
+    color: #e4e4e4;
     margin: 0;
     padding: 0;
 }
@@ -20,6 +20,14 @@ body {
 
 /* Styles for the Sections*/
 .section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-image: url("../img/background.jpg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     text-align: center;
 }
 
@@ -37,7 +45,7 @@ body {
 
 .text {
     font-size: 1.4rem;
-    color: #666;
+    color: #ffffff;
     padding: 0 100px;
     margin-bottom: 20px;
 }
@@ -107,17 +115,6 @@ body {
     padding: 20px;
 }
 
-.image-box {
-    width: 90%;
-    height: 40%;
-    background-color: #2e2e2e; /* Placeholder for the image */
-    text-align: center;
-    padding: 40px;
-    margin-right: 40px;
-    margin-left: 40px;
-
-}
-
 /* Style adjustments for the map image */
 #event_map.section {
     display: flex;
@@ -132,6 +129,66 @@ body {
     animation: floatAnimation 2s ease-in-out infinite alternate;
 }
 
+.content {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch; /* Ensures that children stretch to fill the parent's height */
+    width: 90%; /* Adjust as necessary */
+    height: auto; /* Set the height of the content area */
+}
+
+.image-box {
+    flex: 3; /* Adjust based on desired width */
+    display: flex;
+    align-items: center; /* Center content vertically */
+    justify-content: center; /* Center content horizontally */
+    padding: 15px;
+    margin-right: 20px; /* Space between the globe and the sidebar */
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+}
+
+.sidebar {
+    flex: 1; /* Adjust based on desired width */
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    overflow-y: auto; /* Allows scrolling within the panel */
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    width: 500px; /* Ensures the sidebar takes up the full width */
+}
+
+#checkboxes, #infoPanel {
+    margin-bottom: 20px; /* Spacing between sections */
+}
+
+#controls {
+    margin-bottom: 5px; /* Slightly less spacing between the controls and the bottom of the sidepanel*/
+}
+
+#checkboxes h2, #infoPanel h2, #controls h2 {
+    margin-bottom: 10px; /* Spacing below each title */
+    text-align: center;
+}
+
+#infoPanel {
+    flex-grow: 1;
+    overflow-y: auto; /* In case content is longer than the container */
+    text-align: left;
+}
+
+#infoPanel, #controls, #checkboxes {
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.15); /* Slightly opaque background for better readability */
+    border-radius: 3px; /* Rounded corners for the panels */
+}
+
+#controls input[type="range"], #controls p {
+    text-align: center; /* Center the contents of the controls */
+    width: 100%; /* Full width for easier interaction */
+}
+
 /* Animation for the logo */
 @keyframes floatAnimation {
     0% {

script.js → assets/scripts/script.js

@@ -121,7 +121,6 @@ new fullpage('#fullpage', {
     autoScrolling: true,
     navigation: true,
     licenseKey: 'gplv3-license',
-    sectionsColor: ['#f2f2f2', '#ffcbc4', '#ffcbc4', '#c4d9ff', '#c4d9ff', '#c5ffc4', '#c5ffc4', '#ddc4ff', '#ddc4ff', '#f2f2f2'],
     afterRender: function() {
         loadData(); // Load data and draw the chart
     }
@@ -141,9 +140,9 @@ buttons.on("click", function() {
     // Get the value of the clicked button
     let value = d3.select(this).text();
 
-    // Update the charts based on the selected continent
-    updateChart(value);
-    updateImpactChart(value);
+    // // Update the charts based on the selected continent
+    // updateChart(value);
+    // updateImpactChart(value);
 
     // Select the image element
     const img = d3.select('#map');
@@ -155,3 +154,94 @@ buttons.on("click", function() {
         img.attr("src", "img/heatmap_map.jpg");
     }
 });
+
+const myGlobe = Globe()(document.getElementById('globeViz'))
+  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
+  .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
+  .width(850)
+  .height(600)
+  .pointAltitude(0.01)
+  .pointRadius(0.5)
+  .onPointClick(showEventDetails);  // Add click handler for showing details
+
+let allDataGlobe = [];
+
+fetch('data/World Important Dates with Coordinates.csv')
+  .then(response => response.text())
+  .then(csv => d3.csvParse(csv))
+  .then(data => {
+    allDataGlobe = data;
+    updateGlobeData(21);  // Initialize with data from the 21th century
+  });
+
+document.getElementById('yearSlider').addEventListener('input', function() {
+    const century = parseInt(this.value);
+    document.getElementById('centuryDisplay').textContent = `${century}th`;
+    updateGlobeData(century);
+});
+
+function updateGlobeData(century) {
+    const startYear = (century - 1) * 100 + 1;
+    const endYear = century * 100;
+    const filteredData = allDataGlobe.filter(d => {
+        const year = parseInt(d.Year);
+        return year >= startYear && year <= endYear;
+    });
+    myGlobe.pointsData(filteredData.map(({ latitude, longitude, NameOfIncident, Year, PlaceName, TypeOfEvent, Impact, AffectedPopulation, Outcome }) => ({
+        lat: parseFloat(latitude),
+        lng: parseFloat(longitude),
+        label: NameOfIncident,
+        year: Year,
+        placeName: PlaceName,
+        typeOfEvent: TypeOfEvent,
+        impact: Impact,
+        affectedPopulation: AffectedPopulation,
+        outcome: Outcome // Ensure this is correctly parsed and matches your expected values
+      })))
+      .pointColor(d => {
+        switch(d.outcome.toLowerCase()) { // Use toLowerCase() to avoid case sensitivity issues
+          case 'positive':
+            return 'green';
+          case 'negative':
+            return 'red';
+          case 'mixed':
+            return 'gold';
+          case 'ongoing':
+            return 'blue';
+          default:
+            return 'gray'; // Default color if none of the categories match
+        }
+      });
+      document.getElementById('infoPanel').innerHTML = '<h2><u>Event Details</u></h2>';
+}
+
+function showEventDetails(point) {
+    const infoPanel = document.getElementById('infoPanel');
+    infoPanel.innerHTML = `
+        <h2><u>Event Details</u></h2>
+        <strong><u>Event:</u></strong> ${point.label}<br/>
+        <strong><u>Year:</u></strong> ${point.year}<br/>
+        <strong><u>Location:</u></strong> ${point.placeName}<br/>
+        <strong><u>Type of Event:</u></strong> ${point.typeOfEvent}<br/>
+        <strong><u>Impact:</u></strong> ${point.impact}<br/>
+        <strong><u>Affected Population:</u></strong> ${point.affectedPopulation}<br/>
+        <strong><u>Outcome:</u></strong> ${point.outcome}
+    `;
+    myGlobe.pointAltitude(d => d === point ? 0.1 : 0.01);
+
+}
+
+const globeElement = document.getElementById('globeViz');
+
+// Disable fullPage.js auto-scrolling when the mouse enters the globe container
+globeElement.addEventListener('mouseenter', function() {
+    fullpage_api.setAllowScrolling(false);
+    fullpage_api.setKeyboardScrolling(false);
+});
+
+// Re-enable fullPage.js auto-scrolling when the mouse leaves the globe container
+globeElement.addEventListener('mouseleave', function() {
+    fullpage_api.setAllowScrolling(true);
+    fullpage_api.setKeyboardScrolling(true);
+});
+