The resulting post on Medium, “High Bridge: A Statistical Profile of the Bronx’s Coronavirus Hot Spot.”
New York City released the first map March 26 to break down instances of the coronavirus by neighborhood. I’m a former journalist so I was curious about the United Hospital Fund neighborhoods — their boundaries, populations, age breakdowns (since age can make a person especially vulnerable) and economic status. The city apparently didn’t include that information in their report (“Baffling Coronavirus Map Keeps NYC in the Dark,” Patch, 3/27).
I crunched Census figures for zip codes (the neighborhood boundaries, according to NYC Health info online), and formatted age data for the Bronx into simple D3.js bar graphs — to see what I could manage in 12 hours. Planning to stay inside now for a while to become more proficient in JS and data visualization. (My code below is partly experimentation with code from a Coursera course from NYU).
<html>
<head>
<title>neighborhood charts</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
h1 {
font-size: 3em;
text-align: left;
color: black;
}
body {
font-family: "lora", sans-serif;
margin: 5%;
}
.main {
margin: 10px;
}
</style>
</head>
<body>
<div class="main">
<div id="container"><h2>Age 0-17</h2></div>
</div>
</body>
<script>
let container = d3.select("#container")
d3.csv("data.csv").then(showData)
function write(text) {
container.append("div").text(text)
}
function showData(clients) {
let max = d3.max(clients,
d => d.Rate)
let scale = d3.scaleLinear()
.range([0, 1000])
.domain([0, max])
let join = container.selectAll("div")
.data(clients)
join.enter()
.append("div")
.text(d => d.Name + ": "
+ d.figure )
.style("background-color", "gold")
.style("margin", "8px")
.style("padding", "10px")
.style("color", "black")
.style("font-weight", "bold")
.style("height", 20)
.style("width", d => scale(d.Rate))
}
</script>
</html>