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
};
});
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: 40});
height = 400;
xscale = d3.scaleLinear()
.domain([0, d3.max(covid_totals, d => d.cases)])
.range([margin.left, width - margin.right]);
yscale = d3.scaleLinear()
.domain([0, d3.max(covid_totals, d => d.deaths)])
.range([height - margin.bottom, margin.top]);
container = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('border', '1px dotted #999');
{
// 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));
// Grab all circle elements into a single variable
const circlesSelection = container.selectAll("circle");
// Append circles to the chart and apply attributes
circlesSelection.append("circle")
.data(covid_totals) // Use the covid_total data
.join("circle")
.attr("cx", (d) => xscale(d.cases)) // Set the x value to use the quantitative attribute cases
.attr("r", 3) // Set the radius of the circles
.attr("cy", (d) => yscale(d.deaths)) // Set the y value to use the quantitative attribute deaths
.attr("fill", "white") // Set the circle fill color
.attr("stroke", "blue"); // Set the circle outline color
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.
