Published
Edited
Feb 18, 2021
1. Scatterplot 1 - total cases vs. deaths per locality2. Scatterplot 2 - total cases vs. hospitalizations in VA over time3. Line Chart 1 - time series of total cases in VA over time5. Line Chart 2 - time series of total cases over time for a single health district (your choice)6. Horizontal Bar Chart - total cases for certain health districts
4. Superimposed Line Chart - time series of total cases over time for certain health districts
covid = d3.csvParse(await FileAttachment("VDH-COVID-19-PublicUseDataset-Cases.csv").text(), function(d) {
return {
date: d3.timeParse("%x")(d["Report Date"]),
fips: d.FIPS,
locality: d.Locality,
district: d["VDH Health District"],
cases: +d["Total Cases"],
hospitalizations: +d.Hospitalizations,
deaths: +d.Deaths
};
});
covid.sort(function (a, b) {
return a.date - b.date;
});
printTable(covid.slice(0,5))
printTable(covid.slice(-5))
hr_districts = new Set(["Western Tidewater", "Chesapeake", "Virginia Beach", "Norfolk", "Portsmouth", "Hampton", "Peninsula"])
hr_covid = covid.filter(d => hr_districts.has(d.district))
last_date = covid[covid.length-1].date
covid_totals = covid.filter(d => d.date >= last_date)
hr_totals = covid_totals.filter(d => hr_districts.has(d.district))
margin = ({top: 10, right: 10, bottom: 20, left: 60});
height = 400;
xscale = d3.scaleTime()
.domain([d3.min(hr_covid, d => d.date), d3.max(hr_covid, d => d.date)])
.range([margin.left, width - margin.right]);
yscale = d3.scaleLinear()
.domain([0, d3.max(hr_covid, d => d.cases)])
.range([height - margin.bottom, margin.top]);
container = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('border', '1px dotted #999');
dataByHRDistrct = {
const data = d3.rollup(hr_covid,
cases => d3.sum(cases, c => c.cases),
d => d.district,
d => d.date);
return Array.from(data, ([district, date]) => ({
district: district,
counts: Array.from(date, ([date, cases]) => ({date: date, cases}))
}));
}
{
// Append the x axis
container.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(xscale));
// Append the y axis
container.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yscale));
const color = d3.scaleOrdinal()
.domain(dataByHRDistrct)
.range(d3.schemeTableau10);
const line = d3.line()
.x(d => xscale(d.date))
.y(d => yscale(d.cases))
const series = container.append('g')
.selectAll('g')
.data(dataByHRDistrct)
.join('g')
.attr('stroke', d => color(d.district))
.append('path')
.datum(d => d.counts)
.attr('fill', 'none')
.attr('stroke-width', 2)
.attr('d', line);
return container.node();
}
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
import {printTable} from '@uwdata/data-utilities'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
