diff --git a/time-series.js b/time-series.js index 39b0042eeb3a7b5050ed05bb3b9b9c6daaf7e2b7..aebd213114f13ecf97fe40d3a2d386305d9e3552 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) => {