// 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;
})
raw_data= FileAttachment("us-states.csv").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
chart.update(stack)
// y = d3
// .scaleLinear()
// .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
// .rangeRound([height - margin.bottom, margin.top])
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.