{ const container = html`

`; const height = 350; const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, width, height]); const div = d3.select(container).append("div").classed("tooltip", true); const tooltip = new Tooltip(div); function tooltipContents(d) { const neighb = d.properties.name; const find = latest_rent_data.find((i) => d.properties.name === i.areaName); mutable clicked_neibh = d.properties.name; if (find) { return `

${neighb}

Median Asking Rent: $${d3.format(",")( find.value )}

`; } else { return `

${neighb}

No data

`; } } const projection = d3 .geoMercator() .rotate([0, -65, 0]) .fitExtent( [ [20, 20], [width, height] ], boros.features.filter((i) => i.properties.Borough === "Manhattan")[0] ); const path = d3.geoPath(projection); const g = svg.append("g"); const neighbs_paths = g .selectAll(".neighb") .data(neighbs.features) .enter() .append("path") .classed("neighb", true) .attr("d", path) .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("fill", (d) => { //fill with the most recent data const find = latest_rent_data.find( (i) => d.properties.name === i.areaName ); if (find) { return rent_color_scale(find.value); } return "#E9E9E9"; }); const neighbs_hover = g .selectAll(".neighb_hover") .data(neighbs.features.filter((i) => i.properties.Borough === "Manhattan")) .enter() .append("path") .classed("neighb_hover", true) .attr("d", path) .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("fill", "rgba(255, 255, 255, 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); }); const boros_paths = g .selectAll(".boro") .data(boros.features) .enter() .append("path") .classed("boro", true) .attr("d", path) .attr("stroke", "black") .attr("stroke-width", 0.4) .attr("fill", "none"); return container; }