Visual Analytics Researcher
Public
Edited
Jan 24, 2024
function RidgelineChart(data, {
ridgeOverlap = 8,
ridgeHeight = 16,
width = 640,
marginTop = 40,
marginRight = 20,
marginBottom = 30,
marginLeft = 120,
fillColor = "#ddd",
fillOpacity = 1.,
strokeColor = "#000",
} = {}) {
const dates = Array.from(d3.group(data, d => +d.date).keys()).sort(d3.ascending);
const series = d3.groups(data, d => d.name).map(([name, values]) => {
const value = new Map(values.map(d => [+d.date, d.value]));
return {name, values: dates.map(d => value.get(d))};
});
const height = series.length * ridgeHeight;
// create scales
const x = d3.scaleTime()
.domain(d3.extent(dates))
.range([marginLeft, width - marginRight]);
const y = d3.scalePoint()
.domain(series.map(d => d.name))
.range([marginTop, height - marginBottom]);
const z = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d.values))]).nice()
.range([0, -ridgeOverlap * y.step()]);
// create the area generator and its top-line generator
const area = d3.area()
.curve(d3.curveBasis)
.defined(d => !isNaN(d))
.x((d,i) => x(dates[i]))
.y0(0)
.y1(d => z(d));
const line = area.lineY1();
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// append axes
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0));
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).tickSize(0).tickPadding(4))
.call(g => g.select(".domain").remove());
// append a layer for each series
const group = svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("transform", d => `translate(0,${y(d.name) + 1})`);
group.append("path")
.attr("fill", fillColor)
.attr("opacity", fillOpacity)
.attr("d", d => area(d.values));
group.append("path")
.attr("fill", "none")
.attr("stroke", strokeColor)
.attr("d", d => line(d.values));
return svg.node();
}
traffic = FileAttachment("traffic.csv").csv({typed: true})
storm_data = {
const raw_data1 = await FileAttachment("StormEvents_details-ftp_v1.0_d2023_c20240117_a.csv").csv();
const raw_data2 = await FileAttachment("StormEvents_details-ftp_v1.0_d2023_c20240117_b.csv").csv();
const raw_data = d3.merge([raw_data1, raw_data2]);
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 state_names = [...new Set(raw_data.map(d => d.STATE))].sort(d3.ascending);
return d3.merge(d3.groups(raw_data, d => d.date_str, d => d.STATE).sort((a,b) => d3.ascending(a[0], b[0])).map(d => {
const state_date_map = new Map(d[1]);
return state_names.map(state_name => {
return {
name: state_name,
date: new Date(d[0]),
value: state_date_map.get(state_name) ? state_date_map.get(state_name).length : 0
};
});
}));
}
state_event_type_data = {
const raw_data1 = await FileAttachment("StormEvents_details-ftp_v1.0_d2023_c20240117_a.csv").csv();
const raw_data2 = await FileAttachment("StormEvents_details-ftp_v1.0_d2023_c20240117_b.csv").csv();
const raw_data = d3.merge([raw_data1, raw_data2]);
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 state_names = [...new Set(raw_data.map(d => d.STATE))].sort(d3.ascending);
const event_types = [...new Set(raw_data.map(d => d.EVENT_TYPE))].sort(d3.ascending);
return d3.merge(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 d3.merge(d[1].map(s => {
return s[1].map(e => {
return {
state: s[0],
date: new Date(d[0]),
event: e[0],
value: e[1].length
};
});
}));
// const state_date_map = new Map(d[1]);
// return state_names.map(state_name => {
// return {
// name: state_name,
// date: new Date(d[0]),
// value: state_date_map.get(state_name) ? state_date_map.get(state_name).length : 0
// };
// });
}));
}
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.
