map = { const container = d3.create("div"); const svg = container .append("svg") .attr("width", width) .attr("height", mapHeight); const defs = svg.append("defs"); const patternSize = 3; const pattern = defs .append("pattern") .attr("id", "linePattern") .attr("x", 0) .attr("y", 0) .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", "rotate(45)") .attr("patternUnits", "userSpaceOnUse"); pattern .append("g") .attr("opacity", 0.25) .attr("transform", `translate(${patternSize / 2} 0)`) .append("line") .attr("y1", -2) .attr("y2", patternSize + 2) .attr("stroke", "black") .attr("stroke-width", 1); const cityIndicator = defs.call(citySymbol); const nation = defs .append("path") .datum(adminUnitsGermany.nation.features[0]) .join("path") .attr("id", "nationPath") .attr("d", geoPath); const extruded = svg.append("g").attr("id", "extruded"); for (let i = 0; i < 10; i += 0.5) { extruded .append("use") .attr("href", "#nationPath") .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("transform", `translate(0 ${i})`); } const states = svg .append("g") .attr("id", "states") .selectAll("path") .data(geoDataJoined.states.features) .join("path") .attr("d", geoPath) .attr("fill", (d) => scaleClasses(d.properties.per10k)) .attr("stroke-width", "1") .attr("stroke-linejoin", "round") .attr("stroke", "black"); const countyLayer = svg.append("g").attr("id", "counties"); const top10counties = geoDataJoined.counties.features .sort((a, b) => d3.descending(a.properties.fireArmsPer1k, b.properties.fireArmsPer1k) ) .slice(0, 10); const countyHighlights = countyLayer .append("g") .attr("id", "hightlights") .selectAll("path") .data(top10counties) .join("path") .attr("class", (d) => d.properties.nuts) .attr("d", geoPath) .attr("fill", "url(#linePattern)"); const cityCounties = adminUnitsGermany.counties.features.filter((d) => isCityCounty(d) ); countyLayer .append("g") .selectAll("use") .data(cityCounties) .join("use") .attr("href", "#cityIndicator") .attr("transform", (d) => { const [x, y] = geoPath.centroid(d.geometry); return `translate(${x} ${y})`; }); const counties = countyLayer .append("g") .selectAll("path") .data(geoDataJoined.counties.features) .join("path") .attr("class", (d) => d.properties.nuts) .attr("d", geoPath) .attr("fill", "black") .attr("fill-opacity", 0) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.5) .attr("stroke-width", ".5") .attr("stroke", "black"); const countiesArms = svg .append("g") .attr("id", "arms") .selectAll("circle") .data(geoDataJoined.counties.features) .join("circle") .attr("class", (d) => d.properties.nuts) .attr("r", (d) => scaleR(d.properties.fireArmsPer1k)) .attr("transform", (d) => { const [x, y] = geoPath.centroid(d.geometry); return `translate(${x} ${y})`; }) .attr("fill", "none") .attr("stroke-linejoin", "round") .attr("stroke-width", "1") .attr("stroke", "black"); const nationOutline = svg .append("g") .attr("id", "nation") .append("use") .attr("href", "#nationPath") .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke", "black"); const labels = svg .append("g") .attr("id", "labels") .selectAll("text") .data(geoDataJoined.states.features) .join("text") .attr("text-anchor", "middle") .attr("font-family", "Inter") .attr("font-size", 10) .attr("font-weight", "bold") .attr("stroke", (d) => scaleClasses(d.properties.per10k)) .attr("fill", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke") .attr("dominant-baseline", "middle") .attr("transform", (d) => { const [x, y] = geoPath.centroid(d.geometry); const offset = d.properties.gen === "Brandenburg" ? 30 : 0; return `translate(${x} ${y + offset})`; }) .text((d) => d.properties.gen); const tooltip = container.append("div").attr("id", "tooltip"); counties .on("mouseover", function (e, d) { const id = d.properties.nuts; const circle = svg.select(`circle.${id}`); const cityIndicator = d3 .create("svg") .attr("width", 10) .attr("height", 10); cityIndicator .append("g") .attr("transform", "translate(5 5)") .call(citySymbol); const content = htl.html` ${d.properties.gen} ${ isCityCounty(d) ? cityIndicator : "" }

№ of firearms per 1k	${fInt( d.properties.fireArmsPer1k )}
population	${fInt(d.properties.population)}
№ of firearms	${fInt(d.properties.fireArms)}

`; tooltip.selectChildren().remove(); tooltip.style("visibility", "visible").append(() => content); circle.transition().attr("stroke-width", 5); const county = d3.select(this); county.transition().attr("fill-opacity", 0.25); }) .on("mousemove", (e, d) => { console.log(e); tooltip .style("left", e.layerX + 10 + "px") .style("top", e.layerY + 10 + "px"); }) .on("mouseout", function (e, d) { tooltip.style("visibility", "hidden"); const county = d3.select(this); county.transition().attr("fill-opacity", 0); const id = d.properties.nuts; const circle = svg.select(`circle.${id}`); circle.transition().attr("stroke-width", 1); }); svg.append("g").call(legend); return container.node(); }