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>