From 85d4c8080c89d3e8bdb3e8f176e7c182c25f93f2 Mon Sep 17 00:00:00 2001
From: ericj <eric.jaekel@web.de>
Date: Fri, 13 Dec 2024 01:25:14 +0100
Subject: [PATCH] transparent background + border for time series legend
---
time-series.js | 23 +++++++++++++++++------
1 file changed, 17 insertions(+), 6 deletions(-)
diff --git a/time-series.js b/time-series.js
index 39b0042..aebd213 100644
--- a/time-series.js
+++ b/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) => {
--
GitLab