290 lines
19 KiB
HTML
290 lines
19 KiB
HTML
<!DOCTYPE html><html><head><title>New Jersey - United States | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
|
vertical-align: middle !important;
|
|
}
|
|
th.sorted, td.sorted {
|
|
background-color: #e0eefd;
|
|
}
|
|
.table-sm {
|
|
font-size: 80%;
|
|
}
|
|
</style><script>function makeSparkline(id, data) {
|
|
const canvas = document.getElementById(id);
|
|
const chart = new Chart(canvas.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
|
datasets: [{ data: data }],
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderColor: '#000000',
|
|
borderWidth: 1,
|
|
},
|
|
point: {
|
|
radius: 0,
|
|
},
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
display: false,
|
|
ticks: {
|
|
precision: 0,
|
|
beginAtZero: true,
|
|
}
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
display: false,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
|
const canvas = document.getElementById(id);
|
|
const chart = new Chart(canvas.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Total Deaths',
|
|
data: totalDeaths,
|
|
fill: true,
|
|
borderColor: 'rgb(196, 64, 64)',
|
|
borderWidth: 1,
|
|
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
|
},
|
|
{
|
|
label: 'New Deaths',
|
|
data: newDeaths,
|
|
fill: true,
|
|
borderColor: 'rgb(64, 64, 64)',
|
|
borderWidth: 1,
|
|
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
|
}
|
|
],
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
title: {
|
|
display: true,
|
|
position: 'top',
|
|
text: title,
|
|
},
|
|
tooltips: {
|
|
intersect: false,
|
|
position: 'nearest',
|
|
axis: 'x',
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
display: true,
|
|
ticks: {
|
|
precision: 0,
|
|
beginAtZero: true,
|
|
}
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
display: true,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
|
This page generated from latest data as of 2020-04-27T15:51:55.294Z.
|
|
</em></p><div class="main-content"><h2><a class="float-right" href="/countries/united-states.html" style="font-size: 50%">◀ United States</a>New Jersey - United States</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
|
'main-chart',
|
|
"New Jersey",
|
|
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
|
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,3,5,9,11,16,20,27,44,62,81,108,140,161,198,267,355,537,646,846,917,1003,1232,1504,1709,1932,2183,2350,2443,2805,3156,3518,3840,4070,4362,4496,4753,5150,5426,5683,5914,5938],
|
|
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,1,2,4,2,5,4,7,17,18,19,27,32,21,37,69,88,182,109,200,71,86,229,272,205,223,251,167,93,362,351,362,322,230,292,134,257,397,276,257,231,24],
|
|
);
|
|
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>County/Region</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th>Last 14 days</th></tr></thead><tbody><tr id="row-middlesex" data-name="Middlesex" data-total="442" data-yesterday="11" data-week="97" data-month="442"><td class="sort-order">1</td><td>Middlesex</td><td class="text-right">442</td><td class="text-right sorted">11</td><td class="text-right">97</td><td class="text-right">442</td><td><canvas id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-0",
|
|
[204,216,248,278,309,313,329,345,345,369,396,413,431,442],
|
|
);</script></td></tr><tr id="row-passaic" data-name="Passaic" data-total="426" data-yesterday="10" data-week="163" data-month="425"><td class="sort-order">2</td><td>Passaic</td><td class="text-right">426</td><td class="text-right sorted">10</td><td class="text-right">163</td><td class="text-right">425</td><td><canvas id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-1",
|
|
[136,156,182,211,221,243,250,263,263,327,350,383,416,426],
|
|
);</script></td></tr><tr id="row-union" data-name="Union" data-total="571" data-yesterday="8" data-week="184" data-month="571"><td class="sort-order">3</td><td>Union</td><td class="text-right">571</td><td class="text-right sorted">8</td><td class="text-right">184</td><td class="text-right">571</td><td><canvas id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-2",
|
|
[217,238,269,301,330,356,372,387,387,481,515,542,563,571],
|
|
);</script></td></tr><tr id="row-burlington" data-name="Burlington" data-total="94" data-yesterday="6" data-week="33" data-month="94"><td class="sort-order">4</td><td>Burlington</td><td class="text-right">94</td><td class="text-right sorted">6</td><td class="text-right">33</td><td class="text-right">94</td><td><canvas id="sparkline-3" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-3",
|
|
[24,28,45,52,54,57,58,61,61,68,76,81,88,94],
|
|
);</script></td></tr><tr id="row-ocean" data-name="Ocean" data-total="322" data-yesterday="5" data-week="100" data-month="321"><td class="sort-order">5</td><td>Ocean</td><td class="text-right">322</td><td class="text-right sorted">5</td><td class="text-right">100</td><td class="text-right">321</td><td><canvas id="sparkline-4" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-4",
|
|
[141,149,166,185,201,212,217,222,222,270,286,301,317,322],
|
|
);</script></td></tr><tr id="row-mercer" data-name="Mercer" data-total="188" data-yesterday="5" data-week="66" data-month="188"><td class="sort-order">6</td><td>Mercer</td><td class="text-right">188</td><td class="text-right sorted">5</td><td class="text-right">66</td><td class="text-right">188</td><td><canvas id="sparkline-5" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-5",
|
|
[53,71,76,87,101,110,113,122,122,145,163,178,183,188],
|
|
);</script></td></tr><tr id="row-somerset" data-name="Somerset" data-total="223" data-yesterday="4" data-week="53" data-month="222"><td class="sort-order">7</td><td>Somerset</td><td class="text-right">223</td><td class="text-right sorted">4</td><td class="text-right">53</td><td class="text-right">222</td><td><canvas id="sparkline-6" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-6",
|
|
[85,91,101,121,135,146,158,170,170,183,196,198,219,223],
|
|
);</script></td></tr><tr id="row-morris" data-name="Morris" data-total="351" data-yesterday="4" data-week="82" data-month="350"><td class="sort-order">8</td><td>Morris</td><td class="text-right">351</td><td class="text-right sorted">4</td><td class="text-right">82</td><td class="text-right">350</td><td><canvas id="sparkline-7" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-7",
|
|
[162,192,212,216,232,255,257,269,269,309,324,340,347,351],
|
|
);</script></td></tr><tr id="row-monmouth" data-name="Monmouth" data-total="291" data-yesterday="4" data-week="61" data-month="289"><td class="sort-order">9</td><td>Monmouth</td><td class="text-right">291</td><td class="text-right sorted">4</td><td class="text-right">61</td><td class="text-right">289</td><td><canvas id="sparkline-8" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-8",
|
|
[127,145,167,190,206,221,226,230,230,251,260,273,287,291],
|
|
);</script></td></tr><tr id="row-essex" data-name="Essex" data-total="1023" data-yesterday="4" data-week="272" data-month="1019"><td class="sort-order">10</td><td>Essex</td><td class="text-right">1,023</td><td class="text-right sorted">4</td><td class="text-right">272</td><td class="text-right">1,019</td><td><canvas id="sparkline-9" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-9",
|
|
[433,535,590,642,684,732,740,751,751,888,932,975,1019,1023],
|
|
);</script></td></tr><tr id="row-camden" data-name="Camden" data-total="121" data-yesterday="3" data-week="40" data-month="118"><td class="sort-order">11</td><td>Camden</td><td class="text-right">121</td><td class="text-right sorted">3</td><td class="text-right">40</td><td class="text-right">118</td><td><canvas id="sparkline-10" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-10",
|
|
[35,41,49,60,64,73,74,81,81,94,104,106,118,121],
|
|
);</script></td></tr><tr id="row-warren" data-name="Warren" data-total="65" data-yesterday="2" data-week="18" data-month="65"><td class="sort-order">12</td><td>Warren</td><td class="text-right">65</td><td class="text-right sorted">2</td><td class="text-right">18</td><td class="text-right">65</td><td><canvas id="sparkline-11" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-11",
|
|
[24,25,30,33,36,39,44,47,47,55,60,61,63,65],
|
|
);</script></td></tr><tr id="row-sussex" data-name="Sussex" data-total="92" data-yesterday="1" data-week="28" data-month="92"><td class="sort-order">13</td><td>Sussex</td><td class="text-right">92</td><td class="text-right sorted">1</td><td class="text-right">28</td><td class="text-right">92</td><td><canvas id="sparkline-12" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-12",
|
|
[38,39,41,43,54,55,62,64,64,76,82,84,91,92],
|
|
);</script></td></tr><tr id="row-gloucester" data-name="Gloucester" data-total="31" data-yesterday="1" data-week="6" data-month="31"><td class="sort-order">14</td><td>Gloucester</td><td class="text-right">31</td><td class="text-right sorted">1</td><td class="text-right">6</td><td class="text-right">31</td><td><canvas id="sparkline-13" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-13",
|
|
[9,11,14,18,22,23,24,25,25,29,30,30,30,31],
|
|
);</script></td></tr><tr id="row-bergen" data-name="Bergen" data-total="955" data-yesterday="1" data-week="168" data-month="951"><td class="sort-order">15</td><td>Bergen</td><td class="text-right">955</td><td class="text-right sorted">1</td><td class="text-right">168</td><td class="text-right">951</td><td><canvas id="sparkline-14" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-14",
|
|
[482,550,608,668,714,741,767,787,787,876,907,934,954,955],
|
|
);</script></td></tr><tr id="row-unassigned" data-name="Unassigned" data-total="0" data-yesterday="0" data-week="0" data-month="-247"><td class="sort-order">16</td><td>Unassigned</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">-247</td><td><canvas id="sparkline-15" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-15",
|
|
[2,2,2,3,3,2,0,0,233,0,0,0,0,0],
|
|
);</script></td></tr><tr id="row-out-of-nj" data-name="Out of NJ" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">17</td><td>Out of NJ</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas id="sparkline-16" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-16",
|
|
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
|
);</script></td></tr><tr id="row-salem" data-name="Salem" data-total="6" data-yesterday="0" data-week="2" data-month="6"><td class="sort-order">18</td><td>Salem</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">6</td><td><canvas id="sparkline-17" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-17",
|
|
[4,4,4,4,4,4,4,4,4,6,6,6,6,6],
|
|
);</script></td></tr><tr id="row-hunterdon" data-name="Hunterdon" data-total="23" data-yesterday="0" data-week="5" data-month="23"><td class="sort-order">19</td><td>Hunterdon</td><td class="text-right">23</td><td class="text-right sorted">0</td><td class="text-right">5</td><td class="text-right">23</td><td><canvas id="sparkline-18" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-18",
|
|
[11,11,14,15,16,17,18,18,18,21,22,22,23,23],
|
|
);</script></td></tr><tr id="row-cumberland" data-name="Cumberland" data-total="6" data-yesterday="0" data-week="2" data-month="5"><td class="sort-order">20</td><td>Cumberland</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">5</td><td><canvas id="sparkline-19" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-19",
|
|
[3,3,3,3,3,4,4,4,4,5,5,5,6,6],
|
|
);</script></td></tr><tr id="row-cape-may" data-name="Cape May" data-total="18" data-yesterday="0" data-week="3" data-month="18"><td class="sort-order">21</td><td>Cape May</td><td class="text-right">18</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">18</td><td><canvas id="sparkline-20" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-20",
|
|
[9,10,10,10,14,14,14,15,15,16,16,16,18,18],
|
|
);</script></td></tr><tr id="row-atlantic" data-name="Atlantic" data-total="29" data-yesterday="0" data-week="10" data-month="29"><td class="sort-order">22</td><td>Atlantic</td><td class="text-right">29</td><td class="text-right sorted">0</td><td class="text-right">10</td><td class="text-right">29</td><td><canvas id="sparkline-21" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-21",
|
|
[8,11,13,13,17,19,19,19,19,24,30,29,29,29],
|
|
);</script></td></tr><tr id="row-hudson" data-name="Hudson" data-total="661" data-yesterday="-45" data-week="49" data-month="659"><td class="sort-order">23</td><td>Hudson</td><td class="text-right">661</td><td class="text-right sorted">-45</td><td class="text-right">49</td><td class="text-right">659</td><td><canvas id="sparkline-22" width="200" height="50"></canvas><script>makeSparkline(
|
|
"sparkline-22",
|
|
[236,277,312,365,420,434,612,612,636,657,666,706,706,661],
|
|
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
|
const table = document.getElementById('table');
|
|
const headerRow = table.querySelector('thead tr');
|
|
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
|
const tbody = table.querySelector('tbody');
|
|
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
|
|
|
const resortTable = (col) => {
|
|
let nextChild = null;
|
|
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
|
console.log(col, highlightedIndex);
|
|
headers.forEach((cell, i) => {
|
|
if (i !== highlightedIndex) {
|
|
cell.classList.remove('sorted');
|
|
} else {
|
|
cell.classList.add('sorted');
|
|
}
|
|
});
|
|
|
|
for (let i = allRows.length - 1; i >= 0; i--) {
|
|
const row = allRows[i];
|
|
if (!row) {
|
|
continue;
|
|
}
|
|
const cells = [].slice.call(row.querySelectorAll('td'));
|
|
cells.forEach((cell, i) => {
|
|
if (i !== highlightedIndex) {
|
|
cell.classList.remove('sorted');
|
|
} else {
|
|
cell.classList.add('sorted');
|
|
}
|
|
});
|
|
if (row === nextChild) {
|
|
continue;
|
|
}
|
|
|
|
tbody.insertBefore(row, nextChild);
|
|
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
|
nextChild = row;
|
|
}
|
|
};
|
|
|
|
const handleSort = (value, dir) => {
|
|
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
|
const sortByNumberThenName = (attr) => {
|
|
allRows.sort((a, b) => {
|
|
const aValue = Number(a.getAttribute('data-' + attr));
|
|
const bValue = Number(b.getAttribute('data-' + attr));
|
|
if (aValue === bValue) {
|
|
const aName = a.getAttribute('data-name');
|
|
const bName = b.getAttribute('data-name');
|
|
return aName && bName ? aName.localeCompare(bName) : 0;
|
|
}
|
|
|
|
return aValue < bValue ?
|
|
(newSortDir === 'asc' ? -1 : 1) :
|
|
(newSortDir === 'asc' ? 1 : -1);
|
|
});
|
|
resortTable(value);
|
|
};
|
|
|
|
switch (value) {
|
|
case 'name':
|
|
allRows.sort((a, b) => {
|
|
const aName = a.getAttribute('data-name');
|
|
const bName = b.getAttribute('data-name');
|
|
if (!aName || !bName) {
|
|
return -1;
|
|
}
|
|
if (newSortDir === 'asc') {
|
|
return aName.localeCompare(bName);
|
|
}
|
|
|
|
return bName.localeCompare(aName);
|
|
});
|
|
resortTable('name');
|
|
break;
|
|
case 'total':
|
|
sortByNumberThenName('total');
|
|
break;
|
|
case 'yesterday':
|
|
sortByNumberThenName('yesterday');
|
|
break;
|
|
case 'week':
|
|
sortByNumberThenName('week');
|
|
break;
|
|
case 'month':
|
|
sortByNumberThenName('month');
|
|
break;
|
|
}
|
|
};
|
|
|
|
const handleHash = (hash) => {
|
|
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
|
handleSort(sortValue[0], sortValue[1]);
|
|
};
|
|
|
|
window.addEventListener('hashchange', () => {
|
|
handleHash(window.location.hash);
|
|
});
|
|
|
|
handleHash(window.location.hash);
|
|
}());</script></body></html> |