diff --git a/index.html b/index.html
index 070e644..7f7c50b 100644
--- a/index.html
+++ b/index.html
@@ -1,42 +1,72 @@
-
-
- World Map with D3.js
-
-
-
-
-
-
-
+
+
+ World Map with D3.js
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
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})`)