function generateMap(prefix = "ppp_", column = "sum") { const container = html`

`; const height = 400; const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, width, height]); //map and projection const projection = d3 .geoMercator() .rotate([0, -65, 0]) .fitExtent( [ [20, 20], [width, height] ], manhattan ); const path = d3.geoPath(projection); const g = svg.append("g"); //scale const values = new Map( data .filter((row) => row[prefix + column]) .map((row) => [row.ZCTA_, +row[prefix + column]]) ); const scale = d3 .scaleSequentialQuantile(d3.interpolateReds) .domain(Array.from(values.values())); //legend svg .append("g") .attr("transform", "translate(20,20)") .append(() => Legend(scale, { ticks: 4, tickFormat: column === "count" ? ",.0f" : "$,.0f" }) ); //zipcode and hover overs const zips = g .selectAll(".p-base") .data(zcta.features) .enter() .append("path") .classed("p-base", true) .attr("d", path) .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("fill", (d) => { const key = d.properties.ZCTA5CE20; const value = values.get(key); if (value) return scale(value); return "#E9E9E9"; }); const div = d3.select(container).append("div").classed("tooltip", true); const tooltip = new Tooltip(div); function tooltipContents(d) { const key = d.properties.ZCTA5CE20; const find = data.find((row) => row.ZCTA_ === key); const text = `

Count of loans/grants:

${d3.format(".0f")( find[prefix + "count"] )}

Total amount:

${d3.format("$,.2f")( find[prefix + "sum"] )}

Average amount:

${d3.format("$,.2f")( find[prefix + "avg"] )}

`; const text2 = `

Count of loans/grants:

${d3.format(".0f")( find[prefix + "count"] )}

Total approved amount:

${d3.format("$,.2f")( find[prefix + "approval_sum"] )}

Average approved amount:

${d3.format("$,.2f")( find[prefix + "approval_avg"] )}

Total forgiveness amount:

${d3.format("$,.2f")( find[prefix + "forgive_sum"] )}

Average forgiveness amount:

${d3.format("$,.2f")( find[prefix + "forgive_avg"] )}

`; return `

${key}

${prefix === "ppp_" ? text2 : text}`; } const tooltip_zips = g .selectAll(".p-inter") .data( zcta.features.filter((d) => { //only show joined features const key = d.properties.ZCTA5CE20; const value = values.get(key); return value; }) ) .enter() .append("path") .classed("p-inter", true) .attr("d", path) .attr("fill", "rgba(0,0,0,0)") .attr("stroke", "black") .attr("stroke-width", 0) .on("mouseover", function (event, d) { tooltip.display(d, tooltipContents); d3.select(this).style("stroke", "black").style("stroke-width", 1.5); }) .on("mouseout", function () { tooltip.hide(); d3.select(this).style("stroke", "black").style("stroke-width", 0); }) .on("mousemove", (event) => { tooltip.move(event); }); //community district and labels const districts = g .append("path") .datum(nycd) .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-opacity", 0.7) .attr("stroke-dasharray", "2 1") .attr("stroke-width", 0.9) .attr("d", path); const text = g .selectAll(".labels") .data(nycd.features) .enter() .append("g") .attr("transform", (d) => { const [x, y] = path.centroid(d); return `translate(${x},${y})`; }) .call((g) => { g.append("text") .attr("text-anchor", "middle") .attr("font-size", "12px") .text((d, i) => { return d.properties.cd; }); }) .call((g) => g .selectAll("text") .clone(true) .lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke", "white") ); g.append("path") .datum(marble_hill) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-alignment", "outside") .attr("stroke-width", 1.4) .attr("d", path); return container; }

Purpose-built for displays of data