Published
Edited
Apr 2, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Load the data with `d3.csv()`https://github.com/CSSEGISandData/COVID-19/blob/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv
raw_data = d3.csv(
"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/archived_data/archived_time_series/time_series_19-covid-Confirmed_archived_0325.csv"
)
Insert cell
Insert cell
Insert cell
us_data = raw_data.filter(d => d["Country/Region"] == "US")
Insert cell
Insert cell
state_names = statesData.map(d => d.state_full)
Insert cell
// Filter down to only states listed in the `statesData` array
us_states = us_data.filter(d => state_names.indexOf(d["Province/State"]) !== -1)
Insert cell
Insert cell
Insert cell
Insert cell
import { chart as aarons_chart } from "@aboutaaron/small-multiple-chart-cartogram"
Insert cell
Insert cell
Insert cell
Insert cell
state_data_obj = {
const obj = {};
statesData.forEach(d => (obj[d.state_full] = d));
return obj;
}
Insert cell
Insert cell
Insert cell
formatted_data = us_states.map(d => {
// The object returned for each state
const obj = {};
obj.state = d["Province/State"];
obj.state_postal = state_data_obj[obj.state].state_postal;
obj.row = state_data_obj[obj.state].row;
obj.column = state_data_obj[obj.state].column;
obj.data = [];
obj.total = 0;
// Store the data for each column (e.g., each date)
const dates = Object.keys(d).slice(4, Object.keys(d).length + 1);
dates.forEach((date, i) => {
// Calculate the *new* cases today by subracting the cases yesterday
let new_cases = 0;
if (i === 0) new_cases = +d[date];
else new_cases = +d[date] - +d[dates[i - 1]];
if (new_cases < 0) new_cases = 0; // looking into this....

obj.data.push({ key: date, value: new_cases });
// Track the date of the first case
if (obj.x_min === undefined && +d[date] > 0) {
obj.x_min = date;
// Store a formatted version to display below each chart
const date_pieces = date.split("/");
const date_str = date_pieces[0] + " " + date_pieces[1];
obj.x_min_label = parseDate(
new Date(2020, date_pieces[0] - 1, date_pieces[1])
);
}
// Set the total as the last date
obj.total = +d[date];
});
return obj;
})
Insert cell
Insert cell
Insert cell
Insert cell
// Import his chart, but specify *our* data to use
import { chart } with {
formatted_data as data
} from "@aboutaaron/small-multiple-chart-cartogram"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Store a list of dates for our x scale
dates = formatted_data[0].data.map(d => d.key)
Insert cell
// Get the maximum value (for the Y scale)
max_value = d3.max(formatted_data, d => d3.max(d.data.map(dd => +dd.value)))
Insert cell
// Define our own x scale
my_x = d3
.scaleBand()
.domain(dates)
.range([0, state_size])
Insert cell
// Define our own y scale
my_y = d3
.scaleLinear()
.domain([0, max_value])
.range([0, state_size + 100])
Insert cell
// Importing my own version of the chart, with the data, labels, and scales specified
import { chart as forked_chart, state_size } with {
formatted_data as cartogram_data,
my_title as title,
my_first_x_label as first_x_label,
my_total_label as total_label,
my_y_height_label as y_height_label,
my_x as x,
my_format as format,
my_y as y
} from "@mkfreeman/small-multiple-chart-cartogram/2"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Also setting the formatter
my_format = d3.format(",")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
my_first_x_label = "Date of first case"
Insert cell
my_y_height_label = "New cases each day"
Insert cell
my_total_label = "Total cases"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
with_text_labels = await FileAttachment("with_text_labels.png").url()
Insert cell
Insert cell
parseDate = d3.timeFormat("%b. %d")
Insert cell
Insert cell
Insert cell

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.
Learn more