UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
// Load the data from GitHub
state_data = d3.csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"
)
// Display the table
render_data_table(state_data.slice(0, 10))
// Filter down to just washington
wa_data = state_data.filter(d => d.state == "Washington")
// Filter down to just New York
ny_data = state_data.filter(d => d.state == "New York")
// Get the total in WA (which is the max value, as these are cumulative)
total_wa = d3.max(wa_data, d => +d.cases)
// Get a unique list of states
unique_states = {
const all_names = state_data.map(d => d.state);
const unique_states = _.uniq(all_names);
return unique_states;
}
// Get observations for each state, then find the "max" (which will be the total number in that state)
cases_by_state = unique_states.map(state_name => {
const state_obs = state_data.filter(d => d.state == state_name);
const max_in_state = d3.max(state_obs, d => +d.cases);
return { state: state_name, cases: max_in_state };
})
// Get the highest number of case
most_cases = d3.max(cases_by_state, d => d.cases)
// Get the name of the state with the most cases
state_most_cases = cases_by_state.filter(d => d.cases === most_cases)[0].state
// Calculating state w/most deaths
// Showing a different (simpler?) approach than the steps above for cases
most_deaths = state_data.filter(
d => +d.deaths === d3.max(state_data, dd => +dd.deaths)
)[0]
// Getting total deaths -- this isn't too hard, as the highest value is the cumulative number
total_deaths = unique_states.map(state_name => {
// Get observations for each state, then find the "max" (which will be the total number in that state)
const state_obs = state_data.filter(d => d.state == state_name);
const max_in_state = d3.max(state_obs, d => +d.deaths);
return { state: state_name, cases: max_in_state };
})
// Compute the date range
date_range = {
// Get all of the dates possible
const all_dates = _.uniq(state_data.map(d => d.date));
// Calculate max and min, converting each one to a proper date object (see date formatter below)
const parser = d3.timeParse("%Y-%m-%d");
const min_date = d3.min(all_dates, d => parser(d));
const max_date = d3.max(all_dates, d => parser(d));
return { first_date: min_date, last_date: max_date };
}
// To format the dates in the markdown above
date_formatter = d3.timeFormat("%B %d")
// Tough one here -- convert to cases per day by subtracting the previous day
avg_cases_per_day = unique_states.map(state_name => {
// Object to return
let obj = { state: state_name };
// Filter down the data to the current state, then construct the data object for this state
let this_state_data = state_data.filter(d => d.state == state_name);
const data = this_state_data.map((d, i) => {
// Calculate the *new* cases today by subracting the cases yesterday
// Note, this assumes that the data is ordered by date, which it is (should probably sort....)
let new_cases = 0;
if (i === 0) new_cases = +d.cases;
else new_cases = +d.cases - +this_state_data[i - 1].cases;
return { date: d.date, new_cases: new_cases };
});
// Compute average cases per day in the states' data
obj.avg_cases_per_day = d3.sum(data, d => d.new_cases) / data.length;
// obj.data = data; // uncomment this to attach the "data" to each state object
return obj;
})
// Get the highest average cases per day
highest_avg = avg_cases_per_day.filter(
state =>
state.avg_cases_per_day ===
d3.max(avg_cases_per_day, d => d.avg_cases_per_day)
)[0]
md`## Appendix`
_ = require("underscore")
d3 = require("d3")
import {
displayImage,
render_data_table,
table_styles
} from "@info474/utilities"
table_styles
html`<style>
p code, li code {color: #c30771;}
ul > li {
color:#164eb6;
}
</style>
`
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.
