COVID-19 Data Visualization

Neighborhood names added by author

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>