Visual Analytics Researcher
Public
Edited
Feb 28, 2024
selected_states_data = d3.merge(states_data.filter(d => selected_states.includes(d.state)).map(d => d.values));
states_data.map(d => d.values)
us_data = storm_event_data.map(d => {
// const count =
return {
Date: d.date,
Events: d.states ? d3.sum(d.states.map(s => {
return d3.sum(s.events.map(e => {
return e.values.length
}));
})) : 0
};
});
all_states = [...new Set(d3.merge(storm_event_data.map(d => d.states.map(s => s.state))))].sort(d3.ascending);
states_data = all_states.map(state => {
return {
state: state,
values: storm_event_data.map(d => {
const state_node = d.states.find(s => s.state === state);
return {
state: state,
date: d.date,
value: state_node ? d3.sum(state_node.events.map(e => e.values.length)) : 0,
// value: state_node ? d3.sum(state_node.events.map(e => d.values.length)) : [],
};
})
};
});
storm_event_data = {
const raw_chunks = [];
raw_chunks.push(await FileAttachment("storms2017_00.csv").csv());
raw_chunks.push(await FileAttachment("storms2017_01.csv").csv());
raw_chunks.push(await FileAttachment("storms2018_00.csv").csv());
raw_chunks.push(await FileAttachment("storms2018_01.csv").csv());
raw_chunks.push(await FileAttachment("storms2015_00.csv").csv());
raw_chunks.push(await FileAttachment("storms2015_01.csv").csv());
raw_chunks.push(await FileAttachment("storms2016_00.csv").csv());
raw_chunks.push(await FileAttachment("storms2016_01.csv").csv());
const raw_data = d3.merge(raw_chunks);
raw_data.map(d => {
const year = d.BEGIN_YEARMONTH.slice(0,4);
const month = d.BEGIN_YEARMONTH.slice(4,6);
const hour = d.BEGIN_TIME.slice(0,2);
const minute = d.BEGIN_TIME.slice(2,4);
d.date_str = `${year}-${month}-${d.BEGIN_DAY.padStart(2, '0')}`;
d.date = new Date(+year, +month - 1, d.BEGIN_DAY.padStart(2, '0'), +hour, +minute);
});
// const date_groups = d3.groups(raw_data, d => d.date_str, d => d.STATE, d => d.EVENT_TYPE).sort((a,b) => d3.ascending(a[0], b[0])).map(d => {
// return {
// date: new Date(d[0]),
// states: d[1].map(s => {
// return {
// state: s[0],
// events: s[1].map(e => {
// return {
// event: e[0],
// values: e[1]
// };
// })
// };
// })
// };
// });
const grouped_data = d3.group(raw_data, d => d.date_str, d => d.STATE, d => d.EVENT_TYPE);
const date_extent = d3.extent(raw_data.map(d => new Date(d.date_str)));
const all_dates = d3.timeDay.range(date_extent[0], d3.timeDay.offset(date_extent[1], 2)).map(d => d3.timeFormat("%Y-%m-%d")(d));
return all_dates.map(d => {
const state_data = grouped_data.has(d) ? [...grouped_data.get(d).entries()].map(s => ({state: s[0], events: [...s[1].entries()].map(e => ({event: e[0], values: e[1]}))})) : [];
return {
date: new Date(d),
states: state_data
};
});
}
FileAttachment("storms2015_00.csv").csv()
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.
