Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
// Load the data from NYT
raw_data = {
mutable isLoading = true;
return d3
.csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv",
d3.autoType
)
.then(d => {
mutable isLoading = false;
return d;
});
}
// List of states
states = [...d3.group(raw_data, d => d.state).keys()]
cases_per_day = d3.sort(
states.map(state => {
const state_data = raw_data.filter(d => d.state === state);
const data = state_data.map((dd, i) => {
// Calculate the *new* cases and deaths today by substracting the cases yesterday
let new_cases = 0;
if (i === 0) new_cases = +dd.cases;
else new_cases = +dd.cases - +state_data[i - 1].cases;
return {
date: dd.date,
value: new_cases
};
});
return {
state,
data
};
}),
// Sort by the date where the moving average is the highest
s => -d3.greatestIndex(movingAverage(s.data.map(d => d.value), 7))
)
interval = d3.utcDay
start = d3.min(raw_data, (d) => d.date)
stop = d3.max(raw_data, (d) => d.date)
// Setting defaults
timeChart = TimeChart.defaults({
interval,
start,
stop,
dateFormat: "%m/%d/%Y",
width,
marginTop: 5,
scheme: "reds"
})
import {movingAverage} from "@d3/moving-average"
import { TimeChart, TimeAxis, d3 } from "@observablehq/timechart"
import { Select } from "@observablehq/inputs"
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.
