Monitoring Florida’s COVID-19 statistics: These are the numbers to watch

After months of decline, Florida has seen a recent increase in the number in new COVID-19 cases per day, though deaths have continued to decrease.

Choose a county below to see how the numbers are trending across Florida. Data is updated automatically several times per day.

#right-rail{display:none !important}
#left{
grid-column:1/span 12;
float: none;
width: 100%;

}

.heavy-text {
text-align: center !important;
}
.crd–cnt p {
max-width: 600px;
margin: 0 auto;
}
.crd–cnt h5 {
text-align: center;
margin-top: 20px;
}

.graphic-title {
letter-spacing: -.5px;
font: 400 1em Open Sans Bold,sans-serif;
color: #000;
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: 10px;
}
.graphic-description {
max-width: 600px;
margin: 0 auto 15px;
letter-spacing: 0px;
font: 400 1em Open Sans,sans-serif;
color: #000;
}

.graphic-source {
font: .8em Open Sans Bold,sans-serif;
font-style: italic;
color:#777;
margin: 10px auto 20px;
letter-spacing: 0px;
max-width: 800px;
}
.graphics-row {
margin: 0 auto;
width: 100%;
max-width: 800px;
/* overflow: hidden;
display: flex;
justify-content:space-around;
flex-wrap: wrap; */

}

.graphics-column {
/* margin: 20px auto 30px; */
min-width: 300px;
width: 100%;
/* padding: 0 20px; */
}

.chart-canvas {
width: 100%;
height: 300px;
}

#app-container {
max-width: 800px;
margin: 0 auto;
}

.app-intro {
margin: 0 auto 20px;
text-align: center;
font: 400 1.5em Open Sans Bold,sans-serif;

}

.dropdown-container {
position: relative;
display: inline;
}

#countyDropdown {
margin: 0 auto;
box-sizing: border-box;
height: 31px;
padding: 6px 27px 6px 6px;
font-size: 16px;
text-align: left;
border-radius: 3px;
border: 1px solid #d3d4d4;
outline: 0;
cursor: pointer;
position: relative;
}

.chart-tooltip {
color: white;
position: absolute;
text-align: center;
padding: 10px;
font: 12px sans-serif;
background: black;
border: 0px;
border-radius: 8px;
pointer-events: none;
}

.chart-tooltip p {
color:white;
font: 400 .9em Open Sans,sans-serif
}

.robotext {
border-bottom: solid 2px #3b92af;
}

#summary-breakout {
margin: 40px auto;
}

.summary-row {
margin: 0 auto;
width: 100%;
max-width: 800px;
overflow: hidden;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}

.summary-column {
margin: 20px auto 30px;
min-width: 200px;
width: 33%;
text-align: center;
}

.stat-title {
font: 400 1em Open Sans,sans-serif;
letter-spacing: -.5px;
}

.stat-number {
font: 400 1.4em Open Sans,sans-serif;
letter-spacing: -.5px;
color: #3b92af
}

.stat-description {
font: 400 .8em Open Sans,sans-serif;
color: #666;

}

.tick line {
color: #8383836c;
}

.domain {
display: none;
}

.tick text {
font-size: 12px;
}

.axis-label {
font: 400 .9em Open Sans,sans-serif;

}

.chart-key {
margin: 40px auto 0 !important;
text-align: center;
font: 400 .9em Open Sans Bold,sans-serif;
color: #3b92af;
font-style: italic;
}

.graphic-section-title {
margin: 40px auto 20px;
font: 400 1.3em Open Sans Bold,sans-serif;
text-align: center;
letter-spacing: -1px;

}

.graphic-note {
font: 400 .8em Open Sans,sans-serif;
color: #838383;
font-style: italic;
}

https://d3js.org/d3.v5.min.js

const movingAverage = (data, rollingWindow, maVariable) => {
return data.map((row, index, total) => {
const start = Math.max(0, index – rollingWindow);
const end = index;
const subset = total.slice(start, end + 1);
const sum = subset.reduce((a, b) => {
return a + b[maVariable];
}, 0);
return {
date: row[‘date’],
average: sum / subset.length
};
});
};

var parseDate = d3.timeParse(“%m-%d-%Y”);

// Update summary stats
function updateStats(currentData, place) {

function formatNumber(num) {
return num.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, ‘$1,’)
}

const humanDate = d3.timeFormat(‘%B %-d’);

var casesStat = document.getElementById(“stat-cases”),
// resdeathsStat = document.getElementById(“stat-res-deaths”),
totaldeathsStat = document.getElementById(“stat-total-deaths”),
// nonresdeathsStat = document.getElementById(“stat-nonres-deaths”),
testedStat = document.getElementById(“stat-tested”),
hospitalStat = document.getElementById(“stat-hospitalizations”),
roboDate = document.getElementById(“roboDate”),
roboPlace = document.getElementById(“roboPlace”),
roboCases = document.getElementById(“roboCases”),
roboCasesIncrease = document.getElementById(“roboCasesIncrease”),
roboDeaths = document.getElementById(“roboDeaths”),
roboDeathsIncrease = document.getElementById(“roboDeathsIncrease”)

total_deaths = +currentData.total_res_deaths + +currentData.total_nonres_deaths

casesStat.innerHTML = formatNumber(currentData.total_cases)
totaldeathsStat.innerHTML = formatNumber(total_deaths)
// resdeathsStat.innerHTML = formatNumber(currentData.total_res_deaths)
// nonresdeathsStat.innerHTML = formatNumber(currentData.total_nonres_deaths)
testedStat.innerHTML = formatNumber(currentData.total_tests)
hospitalStat.innerHTML = formatNumber(currentData.total_hospitalized)

roboDate.innerHTML = humanDate(currentData.date)
roboPlace.innerHTML = place
roboCases.innerHTML = formatNumber(currentData.total_cases)
roboCasesIncrease.innerHTML = formatNumber(currentData.new_cases)

conclusionText = document.getElementById(“roboConclusion”)
if (currentData.new_cases == 0) {
conclusionText.innerHTML = “It is possible the state has not yet updated data for today.”
} else {
conclusionText.innerHTML = `The area reported ${formatNumber(currentData.new_deaths)} more resident deaths since the previous day, putting the known death toll at ${formatNumber(currentData.deaths_all)} for residents and nonresidents.

`
}

// The area reported 0 more resident deaths since the previous day, putting the known death toll at 0 for residents and nonresidents.

}

// Chart init functions
function chartAverage(chart_container_id, chart_id, averagedProperty, input_data) {

// Define sizing and spacing
var margin = { top: 20, right: 12, bottom: 30, left:40 },
width = parseInt(d3.select(`#${chart_id}`).style(“width”)) – margin.left – margin.left,
height = parseInt(d3.select(`#${chart_id}`).style(“height”)) – margin.top – margin.bottom
innerWidth = width + margin.right;

// Define scales
var x = d3.scaleBand().range([0, width + margin.right], 0.3)
y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(input_data.map(function(d){ return d.date }));
y.domain([0, d3.max(input_data, function(d) { return d[averagedProperty]; })]);

// Define axes
var xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(“%b”))
.tickValues(x.domain().filter(function(d, i) {
return d.getDate() == 1;
}));

const yAxisGrid = d3.axisLeft().scale(y).tickSize(-innerWidth).ticks(5);

// Define SVG canvas
const svg = d3.select(`#${chart_id}`)
.attr(“width”, width + margin.right + margin.left)
.attr(“height”, height + margin.top + margin.bottom)
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

var formatComma = d3.format(“,”)

// Define the tooltip
var tooltip = d3.select(“body”).append(“div”)
.attr(“class”, `${chart_id}-tooltip chart-tooltip`)
.style(“opacity”, 0);

const humanDate = d3.timeFormat(‘%B %-d’);

svg
.append(“g”)
.attr(“class”, “x axis”)
.attr(“transform”, “translate(0,” + height + “)”)
.call(xAxis);

svg.append(‘g’)
.attr(‘class’, ‘y axis-grid’)
.call(yAxisGrid);

svg.append(“g”)
.selectAll(“.bar”)
.data(input_data)
.enter().append(“rect”)
.attr(“class”, “bar”)
.attr(“fill”, “#ccc”)
.attr(“width”, x.bandwidth())
.attr(“x”, function(d) { return x(d.date); })
.attr(“y”, function(d) { return y(d[averagedProperty]); })
.attr(“height”, function(d) { return height – y(d[averagedProperty]); })
.on(“mouseover”, function(d) {
tooltip.transition()
.duration(200)
.style(“opacity”, .9)
tooltip.html(“

” + humanDate(d[“date”]) + “
“+ formatComma(d[averagedProperty]) +”

“)
.style(“left”, (d3.event.pageX) + “px”)
.style(“top”, (d3.event.pageY – 28) + “px”);
})
.on(“mouseout”, function(d) {
tooltip.transition()
.duration(100)
.style(“opacity”, 0);
});;

const movingAverageData = movingAverage(input_data, 6, averagedProperty);

const movingAverageLine = d3
.line()
.x(d => {
return x(d[‘date’]);
})
.y(d => {
return y(d[‘average’]);
})
svg
.append(‘path’)
.data([movingAverageData])
.style(‘fill’, ‘none’)
.attr(‘id’, ‘movingAverageLine’)
.attr(‘stroke’, ‘#3b92af’)
.attr(‘stroke-width’, ‘2px’)
.attr(‘d’, movingAverageLine);

}

function chartTests(chart_container_id, chart_id, input_data) {

var parseDate = d3.timeParse(“%m-%d-%Y”);

function formatJSDate(dateObj) {
month = ” + (dateObj.getMonth() + 1),
day = ” + dateObj.getDate(),
year = dateObj.getFullYear();

if (month.length < 2)
month = '0' + month;
if (day.length {
element.date_string = formatJSDate(element.date)
return element
});
input_data = input_data.filter(d => d.date_string > parseDate(“04-01-2020”))

// Define sizing and spacing
var margin = { top: 20, right: 40, bottom: 30, left: 50 },
width = parseInt(d3.select(`#${chart_id}`).style(“width”)) – margin.left – margin.right,
height = parseInt(d3.select(`#${chart_id}`).style(“height”)) – margin.top – margin.bottom
innerWidth = width + margin.right;

// Define SVG canvas
const svg = d3.select(`#${chart_id}`)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + margin.top + margin.bottom)
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

// calculates simple moving average over 7 days
const movingAverageData = movingAverage(input_data, 6, “percent_new_tests_positive”);

// find data range
const xMin = d3.min(movingAverageData, d => {
return d[‘date’];
});
const xMax = d3.max(movingAverageData, d => {
return d[‘date’];
});
const yMin = 0;
const yMax = d3.max(movingAverageData, d => {
return d[‘average’];
});

// scales for the charts
const xScale = d3
.scaleTime()
.domain([xMin, xMax])
.range([0, width]);
const yScale = d3
.scaleLinear()
.domain([yMin, yMax])
.range([height, 0]);

// create the axes component
svg
.append(‘g’)
.attr(‘id’, ‘xAxis’)
.attr(‘transform’, `translate(0, ${height})`)
.call(d3.axisBottom(xScale).tickFormat(d3.timeFormat(“%-m/%-d”)).ticks(4));
svg
.append(‘g’)
.attr(‘id’, ‘yAxis’)
.call(d3.axisLeft().scale(yScale).tickSize(-innerWidth).tickFormat(d3.format(“.0%”)).ticks(5));

// generates moving average curve when called
const movingAverageLine = d3
.line()
.x(d => {
return xScale(d[‘date’]);
})
.y(d => {
return yScale(d[‘average’]);
})
svg
.append(‘path’)
.data([movingAverageData])
.style(‘fill’, ‘none’)
.attr(‘id’, ‘movingAverageLine’)
.attr(‘stroke’, ‘#3b92af’)
.attr(‘stroke-width’, ‘2px’)
.attr(‘d’, movingAverageLine);

}

function chartED(chart_container_id, chart_id, chartedProp, input_data) {
// Define sizing and spacing
var margin = { top: 20, right: 40, bottom: 50, left: 50 },
width = parseInt(d3.select(`#${chart_id}`).style(“width”)) – margin.left – margin.right,
height = parseInt(d3.select(`#${chart_id}`).style(“height”)) – margin.top – margin.bottom
innerWidth = width + margin.right;

// Define scales
var x = d3.scaleBand().rangeRound([0, width + margin.right]).padding(0.2),
y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(input_data.map(function(d){ return d.date }));
y.domain([0, d3.max(input_data, function(d) { return d[chartedProp]; })]);

// Define axes
var xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(“%-m/%-d”)).ticks(8)
var yAxis = d3.axisLeft().scale(y).ticks(5);

const yAxisGrid = d3.axisLeft().scale(y).tickSize(-innerWidth).ticks(5);

// Define SVG canvas
const svg = d3.select(`#${chart_id}`)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + margin.top + margin.bottom)
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

var formatComma = d3.format(“,”)

// Define the tooltip
var tooltip = d3.select(“body”).append(“div”)
.attr(“class”, `${chart_id}-tooltip chart-tooltip`)
.style(“opacity”, 0);

const humanDate = d3.timeFormat(‘%B %-d’);

svg
.append(“g”)
.attr(“class”, “x axis”)
.attr(“transform”, “translate(0,” + height + “)”)
.call(xAxis);

svg.append(‘g’)
.attr(‘class’, ‘y axis-grid’)
.call(yAxisGrid);

svg
.selectAll(“.bar”)
.data(input_data)
.enter().append(“rect”)
.attr(“class”, “bar”)
.attr(“fill”, “#ccc”)
.attr(“width”, x.bandwidth())
.attr(“x”, function(d) { return x(d.date); })
.attr(“y”, function(d) { return y(d[chartedProp]); })
.attr(“height”, function(d) { return height – y(d[chartedProp]); })
.on(“mouseover”, function(d) {
tooltip.transition()
.duration(200)
.style(“opacity”, .9)
tooltip.html(“

” + humanDate(d[“date”]) + “: “+ formatComma(d[chartedProp]) +”

“)
.style(“left”, (d3.event.pageX) + “px”)
.style(“top”, (d3.event.pageY – 28) + “px”);
})
.on(“mouseout”, function(d) {
tooltip.transition()
.duration(100)
.style(“opacity”, 0);
});;

svg.append(“text”)
.attr(“class”, “axis-label”)
.attr(“transform”,
“translate(” + (width/2) + ” ,” +
(height + margin.top + 20) + “)”)
.style(“text-anchor”, “middle”)
.text(“Week ending date”);
}

// Update functions
function updateBarChart(chart_id, averagedProperty, new_data) {

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = parseInt(d3.select(`#${chart_id}`).style(“width”)) – margin.left – margin.right,
height = parseInt(d3.select(`#${chart_id}`).style(“height”)) – margin.top – margin.bottom;

// Define scales
var x = d3.scaleBand().range([0, width + margin.right], 0.3)
y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(new_data.map(function(d){ return d.date }));
y.domain([0, d3.max(new_data, function(d) { return d[averagedProperty]; })]);

// Define axes
var xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(“%b”))
.tickValues(x.domain().filter(function(d, i) {
return d.getDate() == 1;
}));

const yAxisGrid = d3.axisLeft().scale(y).tickSize(-innerWidth).ticks(5);

if (d3.max(new_data, function(d) { return d[averagedProperty]}) == 0) {
y.domain([0, 10]);
} else {
y.domain([0, d3.max(new_data, function(d) { return d[averagedProperty]; })]);
}
var xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(“%-m/%-d”)).ticks(2)
.tickValues(x.domain().filter(function(d, i) {return !(i%9);}));

const newyAxisGrid = d3.axisLeft().scale(y).tickSize(-innerWidth).ticks(5);
const newY = d3.select(`#${chart_id} .y`).call(newyAxisGrid).transition().duration(500)

const rect = d3.select(`#${chart_id} g`)
.selectAll(“rect”)
.data(new_data);

rect.transition()
.duration(500)
.attr(“width”, x.bandwidth())
.attr(“x”, function(d) { return x(d.date); })
.attr(“y”, function(d) { return y(d[averagedProperty]); })
.attr(“height”, function(d) { return height – y(d[averagedProperty]); })

// Calculate new MA data
const movingAverageData = movingAverage(new_data, 6, averagedProperty);

const svg = d3.select(`#${chart_id} g`)
const maLine = d3.select(`#${chart_id} g #movingAverageLine`)
// const rect = d3.select(`#${chart_id} g`)

const newLine = d3
.line()
.x(d => {
return x(d[‘date’]);
})
.y(d => {
return y(d[‘average’]);
})

maLine.data([movingAverageData])

maLine.transition()
.duration(500)
.attr(‘d’, newLine);

}

function updateEDChart(chart_id, averagedProperty, new_data){
var margin = { top: 20, right: 20, bottom: 50, left: 50 },
width = parseInt(d3.select(`#${chart_id}`).style(“width”)) – margin.left – margin.right,
height = parseInt(d3.select(`#${chart_id}`).style(“height”)) – margin.top – margin.bottom;

// Re-define scales
var x = d3.scaleBand().rangeRound([0, width + margin.right]).padding(0.2),
y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(new_data.map(function(d){ return d.date }));

if (d3.max(new_data, function(d) { return d[averagedProperty]}) == 0) {
y.domain([0, 10]);
} else {
y.domain([0, d3.max(new_data, function(d) { return d[averagedProperty]; })]);
}
var newXAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(“%-m/%-d”)).ticks(8)
const newX = d3.select(`#${chart_id} .x`).call(newXAxis).transition().duration(500)

const newyAxisGrid = d3.axisLeft().scale(y).tickSize(-innerWidth).ticks(5);
const newY = d3.select(`#${chart_id} .y`).call(newyAxisGrid).transition().duration(500)

const rect = d3.select(`#${chart_id} g`)
.selectAll(“rect”)
.data(new_data);

rect.transition()
.duration(500)
.attr(“width”, x.bandwidth())
.attr(“x”, function(d) { return x(d.date); })
.attr(“y”, function(d) { return y(d[averagedProperty]); })
.attr(“height”, function(d) { return height – y(d[averagedProperty]); })

}

// Initial chart load on pageload
d3.csv(‘https://s3.amazonaws.com/content.sun-sentinel.com/data/covid19/daily-totals/STATEWIDE.csv’).then(
(data) => {

var parsedData = data.map((d) => {
d.new_cases = +d.new_cases;
d.new_deaths = +d.new_deaths;
d.new_tests = +d.new_tests;
d.total_tests = +d.total_tests;
d.new_hospitalized = +d.new_hospitalized;
d.percent_new_tests_positive = +d.percent_new_tests_positive;
d.deaths_all = +d.total_nonres_deaths + +d.total_deaths

d.date = parseDate(d.date);
return d;
});

return parsedData
}
).then((data) => {

updateStats(data[data.length – 1], “Florida”)
chartAverage(“case-growth”, “case-growth-chart”, “new_cases”, data.filter(d => d.date > parseDate(“04-01-2020”)))
chartAverage(“death-growth”, “death-growth-chart”, “new_deaths”, data.filter(d => d.date > parseDate(“04-01-2020”)))
// chartAverage(“tests-growth”, “test-growth-chart”, “new_tests”, data)
chartAverage(“hospitalization-growth”, “hospitalization-growth-chart”, “new_hospitalized”, data.filter(d => d.date > parseDate(“05-15-2020”)))
// chartTests(“positive-test-growth”, “positive-test-percent-chart”, data)
})

d3.csv(‘https://s3.amazonaws.com/content.sun-sentinel.com/data/covid19/daily-totals/STATEWIDE-health-metrics.csv’).then(
(data) => {

var parseDate = d3.timeParse(“%m-%d-%Y”);

var parsedData = data.map((d) => {
d.W_ILI = +d.W_ILI;
d.W_COVIDL = +d.W_COVIDL;

d.date = parseDate(d.Week_EndDate);
return d;
});

return parsedData.filter(d => d.W_ILI > 0)
}
).then((data) => {
chartED(“flu-visits”, “flu-visits-chart”, “W_ILI”, data)
chartED(“covid-visits”, “covid-visits-chart”, “W_COVIDL”, data)
})

document.getElementById(“countyDropdown”).addEventListener(“change”, function(event){

health_metrics_url = `https://s3.amazonaws.com/content.sun-sentinel.com/data/covid19/daily-totals/${event.target.value}-health-metrics.csv`
county_data_url = `https://s3.amazonaws.com/content.sun-sentinel.com/data/covid19/daily-totals/${event.target.value}.csv`

Promise.all([d3.csv(county_data_url), d3.csv(health_metrics_url)]).then(function(data) {
// Load county data
const county_data = data[0]

console.log(data)

var parseDate = d3.timeParse(“%m-%d-%Y”);

var parsedCountyData = county_data.map((d) => {
d.new_cases = +d.new_cases;
d.new_deaths = +d.new_deaths;
d.new_tests = +d.new_tests;
d.new_hospitalized = +d.new_hospitalized;
d.total_tests = +d.total_tests;
d.percent_new_tests_positive = +d.percent_new_tests_positive;
d.deaths_all = +d.total_nonres_deaths + +d.total_deaths;
d.date = parseDate(d.date);
return d;
});

parsedData = parsedCountyData.filter(d => d.date > parseDate(“04-01-2020”))

updateStats(parsedCountyData[parsedCountyData.length – 1], event.target[event.target.options.selectedIndex].text)
updateBarChart(“case-growth-chart”, “new_cases”, parsedData)
updateBarChart(“death-growth-chart”, “new_deaths”, parsedData)
// updateBarChart(“test-growth-chart”, “new_tests”, parsedData)
updateBarChart(“hospitalization-growth-chart”, “new_hospitalized”, parsedData.filter(d => d.date > parseDate(“05-15-2020”)))

// d3.select(“#positive-test-percent-chart g”).remove()
// d3.select(“#positive-test-percent-chart #yAxis”).remove()
// d3.select(“#positive-test-percent-chart #xAxis”).remove()

// chartTests(“positive-test-growth”, “positive-test-percent-chart”, parsedData)

// Load county health metrics data
const county_hm_data = data[1]

var parsedEDData = county_hm_data.map((d) => {
d.W_ILI = +d.W_ILI;
d.W_COVIDL = +d.W_COVIDL;

d.date = parseDate(d.Week_EndDate);
return d;
});

parsedEDData = parsedEDData.filter(d => d.W_ILI > 0)

updateEDChart(“flu-visits-chart”, “W_ILI”, parsedEDData)
updateEDChart(“covid-visits-chart”, “W_COVIDL”, parsedEDData)

})

})

About this data

Data comes from the Florida Department of Health and represents compiled snapshots of figures the state reported on each respective day. If the story and the charts show no new cases or deaths for the day, it could be due to the Florida Department of Health not yet reporting the day’s new figures. The state has typically updated its data daily during the late morning or early afternoon.