us-deaths-old-jhu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .on {
            visibility: visible;
        }
        .off {
            visibility: hidden;
        }

        .d3-tip {
            line-height: 1;
            padding: 6px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            border-radius: 4px;
            font-size: 12px;
        }

        /* Creates a small triangle extender for the tooltip */
        .d3-tip:after {
            box-sizing: border-box;
            display: inline;
            font-size: 10px;
            width: 100%;
            line-height: 1;
            color: rgba(0, 0, 0, 0.8);
            content: "\25BC";
            position: absolute;
            text-align: center;
        }

        /* Style northward tooltips specifically */
        .d3-tip.n:after {
            margin: -2px 0 0 0;
            top: 100%;
            left: 0;
        }
    </style>
    <title>COVID-19 in the United States</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous"/>
    <script src="js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="js/d3.min.js" crossorigin="anonymous"></script>
    <script src="js/d3-tip.js" crossorigin="anonymous"></script>
    <script src="js/CovidData.js" crossorigin="anonymous"></script>
    <script src="js/TimeChart.js" crossorigin="anonymous"></script>
    <script src="js/ResizeObserver.js" crossorigin="anonymous"></script>
    <script src="js/regression.js" crossorigin="anonymous"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-32250702-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-32250702-3');
</script>

</head>
<body style="">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid" style="padding:0;">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                COVID-19 by State in the United States
            </a>
        </div>
        <div id="footerResponsive" class="navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="us.html">Confirmed Cases <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Deaths</a>
                </li>
            </ul>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="http://vaclab.unc.edu/"><img style="width: 192px;" src="vaclab_logo.svg"></a></li>
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" style="background: #fff;">
            <b>Deaths By State</b><br/><span style="font-size:small;">Data <a href="https://github.com/CSSEGISandData/COVID-19/blob/master/csse_covid_19_data/csse_covid_19_time_series/time_series_19-covid-Deaths.csv">pulled live</a> as of <span id="last_date"></span>.<br/>Click on a state name below to see state-level data.</span><p></p>
            <div class="container-fluid" id="state_container">
                <i>Loading...</i>
            </div>
        </div>
        <div class="col-md-9 flex-grow-1;" style="background: #fff;">
            <b>Deaths Over Time</b>
            <br/>
            <button type="button" id='linearbtn' class="btn btn-primary btn-sm" onclick="{
                $('#linearbtn').addClass('btn-primary');
                $('#linearbtn').removeClass('btn-secondary');
                $('#logbtn').addClass('btn-secondary');
                $('#logbtn').removeClass('btn-primary');
                covid_time_chart.use_log_scale(false);
            }">Linear Scale</button>
            <button type="button" id='logbtn' class="btn btn-secondary btn-sm" onclick="{
                $('#linearbtn').addClass('btn-secondary');
                $('#linearbtn').removeClass('btn-primary');
                $('#logbtn').addClass('btn-primary');
                $('#logbtn').removeClass('btn-secondary');
                covid_time_chart.use_log_scale(true);
            }">Log Scale</button>
            <div style="float: right;">
                <button type="button" id='todaymodelbtn' class="btn btn-primary btn-sm" onclick="{
                $('#oldmodelbtn').addClass('btn-secondary');
                $('#oldmodelbtn').removeClass('btn-primary');
                $('#todaymodelbtn').addClass('btn-primary');
                $('#todaymodelbtn').removeClass('btn-secondary');
                covid_time_chart.use_old_model(false);
            }">Latest Model</button>
            <button type="button" id='oldmodelbtn' class="btn btn-secondary btn-sm" onclick="{
                $('#oldmodelbtn').addClass('btn-primary');
                $('#oldmodelbtn').removeClass('btn-secondary');
                $('#todaymodelbtn').addClass('btn-secondary');
                $('#todaymodelbtn').removeClass('btn-primary');
                covid_time_chart.use_old_model(true);
            }">Model from 3 Days Ago</button>
            </div>

            <div class="row flex-grow-1" id="time_chart_container"> </div>
            <div>* The 'forecast' shown on this page is just a simple extrapolation from the best-fit exponential
                model derived from the historical data shown in the visualization. This is obviously a VAST
                simplification of the underlying process. Any serious analysis would need to adopt much more rigorous
                epidemiological models.
            </div>
    </div>
    </div>
<div class="row">
    <div style="margin-top: 15px; border-top: 1px solid lightgray; text-align: center; font-size: small; width: 100%;" class="col-md-12 flex-grow-1">
        <br/><a href="http://vaclab.unc.edu/"><img style="width: 200px;" src="vaclab_logo.svg"></a>
        <br/>
        This project is available as open source via <a href="https://github.com/VACLab/covid/">the VACLab GitHub repository</a>.

    </div>
</div>
<script>
    function legend_select(state_name) {
        if (state_name != undefined) {
            let active = d3.select("#legend-" + state_name.replace(/ /g, '-'));

            if (active.classed('on')) {
                active.classed('off', true);
                active.classed('on', false);
            }
            else {
                active.classed('on', true);
                active.classed('off', false);
            }
        }
        else {
            // This means they clicked the total label.
            let active = d3.select("#legend-total");
            if (active.classed('on')) {
                active.classed('off', true);
                active.classed('on', false);
            }
            else {
                active.classed('on', true);
                active.classed('off', false);
            }
        }
    }

    d3.csv("https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_19-covid-Deaths.csv").then(function(data) {
        let numformat = d3.format(",");

        us_state_data = data.filter(record => (record['Country/Region'] === 'US') && (!record['Province/State'].includes(', ')));
        let covid_data = new CovidData(us_state_data, "");
        covid_time_chart = new TimeChart(covid_data, "Nationwide");

        // Populate last date
        let last_date_span = d3.select("#last_date");
        last_date_span.html(covid_data.date_strings[covid_data.date_strings.length-1]);

        // Populate state data table.
        let state_data_div = d3.select("#state_container");
        let _html = "<table>";
        _html += "<tr onclick=\'legend_select(); covid_time_chart.toggle_total();\'><th style='padding-right: 15px;'>Nationwide</th><th>"+numformat(covid_data.totals[covid_data.totals.length-1])+"</th><th><svg class='legend on' id='legend-total' style='vertical-align: middle; height:15; width: 15px;'><circle style='fill: #888888' cx='8' cy='6' r='5'></circle></svg></th></tr>";

        let state_names = Object.keys(covid_data.regions).sort();
        for (i=0; i<state_names.length; i++) {
            _html += "<tr onclick='legend_select(\""+state_names[i]+"\"); covid_time_chart.select(\""+state_names[i]+"\");'><td style='font-size: small; padding-right: 15px;'>"+state_names[i]+"</td><td style='font-size: small;'>"+numformat(covid_data.regions[state_names[i]][covid_data.date_strings.length-1])+"</td><td><svg class='legend off' id='legend-"+state_names[i].replace(/ /g, '-')+"' style='vertical-align: middle; height:15; width: 15px;'><circle style='fill: #888888' cx='8' cy='6' r='3'></circle></svg></td></tr>";
        }
        _html += "</table>";
        state_data_div.html(_html);

    });
</script>
</body>
</html>