Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Public
Edited
Dec 2, 2022
15 forks
Importers
117 stars
// Function to offset each layer by the maximum of the previous layer
function offset(series, order) {
if (!((n = series.length) > 1)) return;
// Standard series
for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
(s0 = s1), (s1 = series[order[i]]);
let base = d3.max(s0, d => d[1]); // here is where you calculate the maximum of the previous layer
for (var j = 0; j < m; ++j) {
// Set the height based on the data values, shifted up by the previous layer
let diff = s1[j][1] - s1[j][0];
s1[j][0] = base;
s1[j][1] = base + diff;
}
}
}
series = d3
.stack()
.offset(stacks[stack]) // *this is how you apply the custom function*
.keys(top_10_states)(by_date)
.map(d => {
return d.forEach(v => (v.key = d.key)), d;
})
// Load the data with `d3.csv()`
raw_data = d3.csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"
)
// Identify the top 10 states with highest number of cases
top_10_states = d3
.rollups(raw_data, v => d3.max(v, dd => +dd.cases), d => d.state) // get max in each state
.sort((a, b) => b[1] - a[1]) // sort by cases
.filter((d, i) => i < 10) // filter to top 10
.map(d => d[0]) // return the name of the state
// Group data by state
by_state = d3.groups(raw_data, d => d.state)
// Get cases per day (for top 10 states)
cases_per_day = {
let arr = [];
by_state
.filter(d => top_10_states.includes(d[0])) // filter down to top 10
.forEach(state => {
state[1].forEach((d, i) => {
// Compute cases
let new_cases = 0;
if (i === 0) new_cases = +d.cases;
else new_cases = +d.cases - +state[1][i - 1].cases;
// Format date as a proper Date object
const date_pieces = d.date.split("-");
const date = new Date(2020, date_pieces[1] - 1, date_pieces[2]);
arr.push({ state: d.state, date: date, new_cases: new_cases });
});
});
return arr.filter(d => d.date >= +new Date("2020", "02", "01")); // filter down to after March
}
// Resturcture data with one object for each date (with keys for each state)
by_date = aq
.from(cases_per_day) // create an arquero table from the data
.groupby('date') // group by date
.pivot("state", "new_cases") // create a key for each state, populated with the # of new cases
.objects() // return JavaScript objects
d3 = require("d3")
import { radio } from "@jashkenas/inputs"
import { aq, op } from "@uwdata/arquero"
import { code_styles } from "@uw-info474/utilities"
code_styles
// Update the chart each time the `stack` select menu changes
update = chart.update(stack)
// y = d3
// .scaleLinear()
// .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
// .rangeRound([height - margin.bottom, margin.top])
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.
