From e879ff46e066a6faae8e70b130ed99e96045a7f3 Mon Sep 17 00:00:00 2001
From: jewelb54 <44928545+jewelb54@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:18:12 -0500
Subject: [PATCH 1/3] Piechart Commit

---
 scripts/pie-chart.js | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/scripts/pie-chart.js b/scripts/pie-chart.js
index 8da9786..460f494 100644
--- a/scripts/pie-chart.js
+++ b/scripts/pie-chart.js
@@ -7,7 +7,10 @@ class PieChart {
         this.height = 400;
         this.radius = Math.min(this.width, this.height) / 2;
     
-        this.color = d3.scaleOrdinal(d3.schemeCategory10);
+        this.color = d3.scaleOrdinal().range(['#ff5733', '#ffa833', '#33ff57', '#335eff', '#a833ff']);
+
+        // Define a variable to store the currently hovered slice
+        this.hoveredSlice = null;
     
         this.svg = d3.select("#pie-chart")
                 .attr("width", this.width)
@@ -19,22 +22,43 @@ class PieChart {
     
         this.arc = d3.arc()
                     .innerRadius(0)
-                    .outerRadius(this.radius);
+                    .outerRadius(this.radius)
+                    .cornerRadius(8); // Add corner radius for a better look;
     }
 
     draw() {
+
+        const chart = this;
+
         const arcs = this.svg.selectAll("arc")
                 .data(this.pie(this.data))
                 .enter()
                 .append("g")
-                .attr("class", "arc");
+                .attr("class", "arc")
+                .on("mouseover", function (event, d) {
+                        // Highlight the current slice on mouseover
+                        d3.select(this)
+                        .transition()
+                        .duration(200) // Adjust the duration as needed
+                        .attr("stroke", "black")
+                        .attr("stroke-width", 2);
+        
+                })
+                .on("mouseout", function (event, d) {
+                    // Remove the highlight on mouseout
+                    d3.select(this)
+                      .transition()
+                      .duration(200) // Adjust the duration as needed
+                      .attr("stroke", "none");
+
+                });
 
         arcs.append("path")
-                .attr("fill", (d, i) => this.color(i))
-                .attr("d", this.arc);
+                .attr("fill", (d, i) => chart.color(i))
+                .attr("d", chart.arc);
 
         arcs.append("text")
-                .attr("transform", d => `translate(${this.arc.centroid(d)})`)
+                .attr("transform", d => `translate(${chart.arc.centroid(d)})`)
                 .attr("text-anchor", d => (d.endAngle + d.startAngle) / 2 > Math.PI ? "end" : "start")
                 .text(d => `${d.data.gender}: ${Math.round(d.data.fatalityCount)}`)
                 .attr("fill", "white");
@@ -43,4 +67,4 @@ class PieChart {
     clear() {
         this.svg.selectAll(".arc").remove();
     };
-}
\ No newline at end of file
+}

From e6df6154db2085e8318abb913d2f64ae4071d73b Mon Sep 17 00:00:00 2001
From: jewelb54 <44928545+jewelb54@users.noreply.github.com>
Date: Wed, 6 Dec 2023 15:24:22 -0500
Subject: [PATCH 2/3] Commit by Rana

---
 scripts/pie-chart.js         | 38 +++++++++++++++++++++++++++++-------
 scripts/stacked-bar-chart.js | 28 +++++++++++++++++++++-----
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/scripts/pie-chart.js b/scripts/pie-chart.js
index 8da9786..460f494 100644
--- a/scripts/pie-chart.js
+++ b/scripts/pie-chart.js
@@ -7,7 +7,10 @@ class PieChart {
         this.height = 400;
         this.radius = Math.min(this.width, this.height) / 2;
     
-        this.color = d3.scaleOrdinal(d3.schemeCategory10);
+        this.color = d3.scaleOrdinal().range(['#ff5733', '#ffa833', '#33ff57', '#335eff', '#a833ff']);
+
+        // Define a variable to store the currently hovered slice
+        this.hoveredSlice = null;
     
         this.svg = d3.select("#pie-chart")
                 .attr("width", this.width)
@@ -19,22 +22,43 @@ class PieChart {
     
         this.arc = d3.arc()
                     .innerRadius(0)
-                    .outerRadius(this.radius);
+                    .outerRadius(this.radius)
+                    .cornerRadius(8); // Add corner radius for a better look;
     }
 
     draw() {
+
+        const chart = this;
+
         const arcs = this.svg.selectAll("arc")
                 .data(this.pie(this.data))
                 .enter()
                 .append("g")
-                .attr("class", "arc");
+                .attr("class", "arc")
+                .on("mouseover", function (event, d) {
+                        // Highlight the current slice on mouseover
+                        d3.select(this)
+                        .transition()
+                        .duration(200) // Adjust the duration as needed
+                        .attr("stroke", "black")
+                        .attr("stroke-width", 2);
+        
+                })
+                .on("mouseout", function (event, d) {
+                    // Remove the highlight on mouseout
+                    d3.select(this)
+                      .transition()
+                      .duration(200) // Adjust the duration as needed
+                      .attr("stroke", "none");
+
+                });
 
         arcs.append("path")
-                .attr("fill", (d, i) => this.color(i))
-                .attr("d", this.arc);
+                .attr("fill", (d, i) => chart.color(i))
+                .attr("d", chart.arc);
 
         arcs.append("text")
-                .attr("transform", d => `translate(${this.arc.centroid(d)})`)
+                .attr("transform", d => `translate(${chart.arc.centroid(d)})`)
                 .attr("text-anchor", d => (d.endAngle + d.startAngle) / 2 > Math.PI ? "end" : "start")
                 .text(d => `${d.data.gender}: ${Math.round(d.data.fatalityCount)}`)
                 .attr("fill", "white");
@@ -43,4 +67,4 @@ class PieChart {
     clear() {
         this.svg.selectAll(".arc").remove();
     };
-}
\ No newline at end of file
+}
diff --git a/scripts/stacked-bar-chart.js b/scripts/stacked-bar-chart.js
index 5093f09..cb2d6a6 100644
--- a/scripts/stacked-bar-chart.js
+++ b/scripts/stacked-bar-chart.js
@@ -24,6 +24,9 @@ class StackedBarChart {
 
 	this.color = d3.scaleOrdinal()
 		.range(d3.schemeCategory10);
+    
+	// Define a variable to store the currently hovered bar
+	this.hoveredBar = null;
 
 	this.stack = d3.stack()
 		.keys(this.categories);
@@ -35,18 +38,33 @@ class StackedBarChart {
 	}
 
 	draw() {
+        const chart = this;
 
 		this.g.selectAll("g")
 			.data(this.stackedData)
 			.enter().append("g")
-			.attr("fill", d => this.color(d.key))
+			.attr("fill", d => chart.color(d.key))
 			.selectAll("rect")
 			.data(d => d)
 			.enter().append("rect")
-			.attr("x", d => this.x(d.data.year))
-			.attr("y", d => this.y(d[1]))
-			.attr("height", d => this.y(d[0]) - this.y(d[1]))
-			.attr("width", this.x.bandwidth());
+			.attr("x", d => chart.x(d.data.year))
+			.attr("y", d => chart.y(d[1]))
+			.attr("height", d => chart.y(d[0]) - chart.y(d[1]))
+			.attr("width", chart.x.bandwidth())
+			.on("mouseover", function (event, d) {
+                // Highlight the current bar on mouseover with transition
+                d3.select(this)
+                    .transition()
+                    .duration(200) // Adjust the duration as needed
+                    .attr("fill", "orange"); // Change the color for highlighting
+            })
+            .on("mouseout", function (event, d) {
+                // Restore the color on mouseout with transition
+                d3.select(this)
+                    .transition()
+                    .duration(200) // Adjust the duration as needed
+                    .attr("fill", d => chart.color(d3.select(this.parentNode).datum().key));
+			});
 
 		this.g.append("g")
 			.attr("transform", `translate(0,${this.innerHeight})`)

From 0976f05bfd3115cae5d6baf45c8daa2fed456209 Mon Sep 17 00:00:00 2001
From: jewelb54 <44928545+jewelb54@users.noreply.github.com>
Date: Wed, 6 Dec 2023 20:29:41 -0500
Subject: [PATCH 3/3] Update Index.html

---
 index.html | 98 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 64 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index 070e644..7f7c50b 100644
--- a/index.html
+++ b/index.html
@@ -1,42 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>World Map with D3.js</title>
-	<style>
-		/* Add your custom styles here */
-		body {
-			margin: 0;
-			padding: 0;
-		}
-
-		#proportional-symbol-map {
-			width: 100vw;
-			height: 100vh;
-		}
-		/* Add your custom styles here */
-		.land {
-			fill: #ccc; /* Fill color for countries */
-			stroke: #fff; /* Border color for countries */
-			stroke-width: 1; /* Border width for countries */
-		}
-		.incident-point {
-			fill: red; /* Point color */
-		}
-  	</style>
-	
-	<!-- Include D3.js -->
-	<script src="https://d3js.org/d3.v5.min.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
-	<!-- Include TopoJSON -->
-	<script src="https://d3js.org/topojson.v3.min.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>World Map with D3.js</title>
+    <style>
+        /* Add your custom styles here */
+        body {
+            margin: 0;
+            padding: 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 10px;
+            height: 100vh;
+        }
+
+        #proportional-symbol-map {
+            grid-row: 1 / 2;
+            grid-column: 1 / 2;
+            width: 100%;
+            height: 100%;
+        }
+
+        #stacked-bar-chart {
+            grid-row: 1 / 2;
+            grid-column: 2 / 3;
+            width: 100%;
+            height: 100%;
+        }
+
+        #sankey-chart {
+            grid-row: 2 / 3;
+            grid-column: 1 / 2;
+            width: 100%;
+            height: 100%;
+        }
+
+        #pie-chart {
+            grid-row: 2 / 3;
+            grid-column: 2.5 / 3;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Add your custom styles here */
+        .land {
+            fill: #ccc; /* Fill color for countries */
+            stroke: #fff; /* Border color for countries */
+            stroke-width: 1; /* Border width for countries */
+        }
+
+        .incident-point {
+            fill: red; /* Point color */
+        }
+    </style>
+
+    <!-- Include D3.js -->
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
+    <!-- Include TopoJSON -->
+    <script src="https://d3js.org/topojson.v3.min.js"></script>
 </head>
 <body>
-	<svg width="800" height="400" id="proportional-symbol-map"></svg>
-	<div  id="sankey-chart"></div>
-	<svg width="800" height="400" id="stacked-bar-chart"></svg>
-	<svg id="pie-chart"></svg>
+    <svg id="proportional-symbol-map"></svg>
+    <svg id="stacked-bar-chart"></svg>
+    <div id="sankey-chart"></div>
+    <svg id="pie-chart"></svg>
 
     <!-- Include JavaScript files -->
     <script src="scripts/preprocessing.js"></script>