<svg width="815" height="1899" id="canvas"></svg>

<div id="controls">

<h1>Manhattan Trees </br> and Their "Roots"</h1>

<p><i>Trees might be planted into the ground, but their </br> locations are rooted in redlining practices, </br> especially in cities. </br></br> Discover 1937 Manhattan, and hover </br> over each button to see more details.</i></p>

</br>

<div>

<button id="btnShowAll"

<div title="Click below to see how the region was redlined.">show all</button>

</br>

<button id="btnA" style="background-color:#8cb369"

<div title="aka white neighborhoods">"best neighborhoods"</div>

</button>

<button id="btnB" style="background-color: #8EB8E5"

<div title="neighborhoods with very few minorities">"still desirable"</button>

</br>

<button id="btnC" style="background-color: #F4E285"

<div title="neighborhoods with a growing number of minorities">"definitely declining"</button>

</br>

<button id="btnD" style="background-color: #DB5461"

<div title="aka neighborhoods of minorities">"hazardous"</button>

</br>

<button id="btnDimAll">hide all</button>

</br></br>

<button id="btnFlood" style="background-color: #D4D4D4"

<div title="facing fragility, historically redlined neighborhoods are now forced to deal with heavier consequences of global warming due to the prevented provision of green infrastructure and vegetation. By 2050, given current projections, parts of those neighborhoods will be underwater.">consequences? fragility</button>

</div>

</div>

.center([-73.95635, 40.852])

.scale(482000)

let mapLayer = map.append("g").attr("id","flood_zones")

.selectAll("path")

.data(worldFlood.features)

.join("path")

.attr("d", pathGenerator)

.style("fill", "#D4D4D4")

.style("opacity", "0")

return mapLayer;

let mapLayer = map.append("g").attr("id","neighborhood")

.selectAll("path")

.data(world.features)

.join("path")

.attr("d", pathGenerator)

.attr("class", d => d.properties["holc_grade"]);

return mapLayer;

.A {fill:#8cb369; opacity:0}

.B {fill:#8EB8E5; opacity:0}

.C {fill:#f4e285; opacity:0}

.D {fill:#DB5461; opacity:0}

.data(data)

.join("circle")

.attr('cx', d => projection([toNum(d.longitude),toNum(d.latitude)])[0])

.attr('cy', d => projection([toNum(d.longitude),toNum(d.latitude)])[1])

.attr("r", d => rFromDiameter(d['tree_dbh']) * 0.08)

hideAll();

drawMap.filter(d => d.properties[field] == value).style("opacity", "1");

hideAll();

drawMap.filter(d => d.properties[field] > value).style("opacity", "1");

}

const btns = d3.select("#viz_box").select("#controls");

btns.select("#btnA").on("click", () => filter("holc_grade",'A'));

btns.select("#btnB").on("click", () => filter("holc_grade",'B'));

btns.select("#btnC").on("click", () => filter("holc_grade",'C'));

btns.select("#btnD").on("click", () => filter("holc_grade",'D'));

btns.select("#btnShowAll").on("click", showAll);

btns.select("#btnDimAll").on("click", hideAll);

btns.select("#btnFlood").on("click", showFlood);

btns.select("#btnFlood").on("dblclick", hideFlood);

#viz_box {

text-align: center;

}

#controls {

position: absolute;

top: 10px;

left: 5px;

font-size: 12px;

text-align: enter

}

#controls button {

width: 200px;

border-radius: 15px;

border: 1px solid gray;

margin: 2px;

}

#controls button:hover {

cursor: pointer;

}

#mytext {fill: red;}