${t.getAttribute("data-name")}

Arbeitslosenquote: ${d3.format(",.1%")(t.getAttribute("data-rrs"))}

${`

${covariate.replace(/_/g, " ")}: ${d3.format(",.1%")( t.getAttribute("data-covariate") )}

` }

`; tippy(t, { content: content, theme: "light-border", maxWidth: 300 }); }); let s = map_width / 6; let legend = svg .append("g") .attr("transform", `translate(${50},${30})`); // position of mini legend let arrow_group = legend.append("g"); arrow_group // from http://thenewcode.com/1068/Making-Arrows-in-SVG .append("svg:defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", 0.5 * 10) .attr("markerHeight", 0.5 * 7) .attr("refX", 0) .attr("refY", 0.5 * 3.5) .attr("orient", "auto") .append("polygon") // .attr("points", `0 0, 10 3.5, 0 7`); .attr("points", `0 0, ${0.5 * 10} ${0.5 * 3.5}, 0 ${0.5 * 7}`); let patches = legend.append("g"); let arrows = legend.append("g"); { let n = 5; let dd = s / n; let to_rr = d3 .scaleLinear() .domain([0, n - 1]) .range([rr_scores.min, rr_scores.max]); let to_covariate = d3 .scaleLinear() .domain([0, n - 1]) .range([covariate_values.min, covariate_values.max]); for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { patches .append("rect") .attr( "class", "color" + color(to_rr(i), to_covariate(n - j - 1)).slice(1) ) .attr("x", i * dd) .attr("y", j * dd) .attr("width", s / n) .attr("height", s / n) .attr("fill", color(to_rr(i), to_covariate(n - j - 1))) .attr("stroke", "white") .attr("stroke-width", 0.9); // Abstand zwischen Kastln in kleiner Legende } } arrows .append("line") .attr("x1", 0) .attr("x2", s) .attr("y1", s) .attr("y2", s) .attr("stroke", "black") .attr("stroke-width", 2) .attr("marker-end", "url(#arrowhead)"); arrows .append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", s) .attr("y2", 0) .attr("stroke", "black") .attr("stroke-width", 2) .attr("marker-end", "url(#arrowhead)"); arrows .append("text") .attr("x", 0.7 * s) .attr("y", 1.2 * s) .attr("font-size", 0.010 * width) .text("Arbeitslosenquote"); arrows .append("text") .attr("x", -0.016 * width) .attr("y", -0.012 * width) .attr("font-size", 0.010 * width) .text(covariate); } return div.node(); }