dlawler489/COS30045
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update script.js

Browse source
This commit is contained in:
dlawler489 2025-06-03 10:03:24 +10:00
parent 52c4d65792
commit a17f9c106e
1 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
script/script.js
View file

@ -568,8 +568,8 @@ function drawChoropleth(data, worldData, selectedContinent) {
// Color scale for choropleth // Color scale for choropleth
const colorScale = d3.scaleSequential() const colorScale = d3.scaleSequential()
.interpolator(d3.interpolateYlGnBu) .interpolator(darkMode ? d3.interpolateYlOrRd : d3.interpolateYlGnBu)
.domain([0, 100]); .domain(darkMode ? [100, 0] : [0, 100]);
// Remove previous map if any // Remove previous map if any
g.selectAll(".country").remove(); g.selectAll(".country").remove();
@ -639,12 +639,15 @@ function drawChoropleth(data, worldData, selectedContinent) {
} }
} }
// Add legend for color scale // Add legend for color scale (draw OUTSIDE zoom group, so it remains fixed)
const legendWidth = 200; const legendWidth = 200;
const legendHeight = 12; const legendHeight = 12;
const legendSvg = g.append("g") // Remove any previous choropleth legend
svg.selectAll(".choropleth-legend").remove();
// Place legend at the bottom center of the SVG
const legendSvg = svg.append("g")
.attr("class", "choropleth-legend") .attr("class", "choropleth-legend")
.attr("transform", `translate(${width - legendWidth - 20},${height - 40})`); .attr("transform", `translate(${(+svg.attr("width") - 200) / 2},${+svg.attr("height") - 40})`);
const defs = svg.select("defs").empty() ? svg.append("defs") : svg.select("defs"); const defs = svg.select("defs").empty() ? svg.append("defs") : svg.select("defs");
defs.selectAll("#choropleth-gradient").remove(); defs.selectAll("#choropleth-gradient").remove();
@ -667,4 +670,15 @@ function drawChoropleth(data, worldData, selectedContinent) {
legendSvg.append("g") legendSvg.append("g")
.attr("transform", `translate(0,${legendHeight})`) .attr("transform", `translate(0,${legendHeight})`)
.call(legendAxis); .call(legendAxis);
// Dark mode styling for legend axis and labels
if (darkMode) {
legendSvg.selectAll("text").style("fill", "#eee");
legendSvg.selectAll("path").style("stroke", "#eee");
legendSvg.selectAll("line").style("stroke", "#eee");
} else {
legendSvg.selectAll("text").style("fill", "#000");
legendSvg.selectAll("path").style("stroke", "#000");
legendSvg.selectAll("line").style("stroke", "#000");
}
} }