redlined_and_imperviousSurfaceArea = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
.attr("fill", d => imperviousAreaColor(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `Impervious Surface Area (%): ${d3.format(".1f")(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);
svg.append("g")
.selectAll("path")
.data(redlinedNeighborhoods.features)
.join("path")
.attr("fill", "none")
.attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none")
.attr("stroke-width", "4px")
.attr("stroke-linejoin", "arcs")
.attr("stroke-opacity", 0.8)
.attr("d", path);
const scale = d3.scaleSequentialLog(imperviousAreaExtent, d3.interpolateGreys)
const legend = d3Legend
.legendColor()
.shapePadding(30)
.labelAlign("start")
.shapeWidth(30)
.labelOffset(20)
.cells(10)
.orient("horizontal")
.scale(scale)
svg.append("g")
.attr("class", "legend_auto")
.style('font-size', 11)
.attr("transform", `translate(${width/2-65}, ${height/2+230})`)
.call(legend)
.attr("font-family", "Arial")
svg.append("text")
.text("Impervious Surface Area (%)")
.style('font-size', 17)
.attr("transform", `translate(${width/2-65}, ${height/2+220})`)
.attr("font-family", "Arial")
.attr("font-weight", "Bold")
return svg.node();
}