Published
Edited
Feb 18, 2021
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
};
}, d3.autoType);
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(covid_cases_objects, d => d.date), d3.max(covid_cases_objects, d => d.date)])
.range([margin.left, width - margin.right]);
yscale = d3.scaleLinear()
.domain([0, d3.max(covid_cases_objects, d => d.cases)])
.range([height - margin.bottom, margin.top]);
container = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('border', '1px dotted #999');
covid.sort(function (a, b) {
return a.date - b.date;
});
covid_cases_rollup = d3.rollups(covid, v => d3.sum(v, d => d.cases), d => d.date);
covid_cases_objects = covid_cases_rollup.map(obj => { let rObj= {}; rObj["date"] = obj[0]; rObj["cases"] = obj[1]; return rObj;})
{
// 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 line = d3.line()
.x(d => xscale(d.date)) // X value is the date attribute
.y(d => yscale(d.cases)) // Y value is the cases attribute
container.append("path")
.datum(covid_cases_objects) // Data used to draw the line
.style("fill", "none") // Line does not need fill
.style("stroke", "steelblue") // Set the color of the line
.style("stroke-width", 1.5) // Set the line width
.style('stroke-miterlimit', '1')
.attr("d", line);
return container.node(); // Return the chart
}
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.
