transparent background + border for time series legend

time-series.js

@@ -8,7 +8,6 @@ function resize() {
 }
 
 d3.csv("schengen_data.csv").then((data) => {
-    console.log(data)
     const { width, height } = resize();
     const allStates = new Set(data.map(d => d["Schengen State"]));
     const color = d3.scaleOrdinal(d3.schemeCategory10).domain(allStates);
@@ -59,8 +58,6 @@ d3.csv("schengen_data.csv").then((data) => {
             .attr("class", "axis")
             .call(d3.axisLeft(y));
 
-        console.log(aggregatedData)
-
         for (const state of allStates) {
             const stateData = aggregatedData.map(d => ({ year: d.year, value: d[state] || 0 }));
 
@@ -71,7 +68,6 @@ d3.csv("schengen_data.csv").then((data) => {
                     .x(d => x(d.year))
                     .y(d => y(d.value))
                 )
-                .attr("id", (d)=>console.log(d))
                 .attr("stroke", color(state))
                 .attr("stroke-width", 1.5)
                 .attr("fill", "none")
@@ -80,7 +76,7 @@ d3.csv("schengen_data.csv").then((data) => {
                 })
                 .on("mouseout", function() {
                     d3.select(this).classed("highlighted", false);
-                });
+                })
         }
 
         const legend = svg
@@ -89,7 +85,7 @@ d3.csv("schengen_data.csv").then((data) => {
             .enter()
             .append("g")
             .attr("class", "legend-group")
-            .attr("transform", `translate(${width - 150}, 20)`)
+            .attr("transform", `translate(${width - 150}, 0)`)
             .selectAll(".legend-item")
             .data(Array.from(allStates))
             .enter()
@@ -117,6 +113,21 @@ d3.csv("schengen_data.csv").then((data) => {
                     .style("text-transform", "capitalize")
                     .text(d);
             });
+
+        const legendBBox = svg.select(".legend-group").node().getBBox()
+        console.log(legendBBox)
+
+        svg.select(".legend-group")
+            .insert("rect", ":first-child")
+            .attr("width", legendBBox.width+20)
+            .attr("height", legendBBox.height+20)
+            .attr("transform", `translate(-10, -10)`)
+            .attr("fill", "white")
+            .attr("fill-opacity", 0.7)
+            .attr("stroke", "#c6c6c6")
+            .attr("stroke-width", 2)
+            .attr("rx", 5)
+            .attr("ry", 5)
     }
 
     document.getElementById("visa-type-selector").addEventListener("change", (event) => {