Senior Art Editor at Nature News in London.
Public
Edited
Aug 2, 2023
bladderData = {
const data = await FileAttachment("quarter_file_bladder.csv").csv({
typed: true
});
const dataWithDate = data
.map((d) => {
const date = getDateFromQuarter(d.year, d.quarter);
return { date, ...d };
})
.filter((d) => d.year > 2015);
return dataWithDate;
}
bladderDates = [
{ label: "Date of AA", date: new Date("5/18/2016") },
{ label: "Date of negative trial publication", date: new Date("2/24/2018") },
{ label: "Date of withdrawal", date: new Date("3/8/2021") }
]
bladderPlot = Plot.plot({
width,
marginTop: 20,
y: { domain: [0, 0.7], grid: true, label: null },
marks: [
Plot.rectY(bladderData, {
x: "date",
y: "qtr_rate_of_rcd_wt_AAdrug",
interval: "quarter",
fill: "orange",
title: (d) => d.date
}),
Plot.ruleX(
bladderDates.map((d) => d.date),
{}
),
Plot.text(bladderDates, {
x: (d) => d.date,
y: 0.7,
dy: -10,
text: (d) => d.label
}),
Plot.ruleY([0])
]
})
breastData = {
const data = await FileAttachment("quarter_file_breast.csv").csv({
typed: true
});
const dataWithDate = data
.map((d) => {
const date = getDateFromQuarter(d.year, d.quarter);
return { date, ...d };
})
.filter((d) => d.year > 2018);
return dataWithDate;
}
breastDates = [
{ label: "Date of AA", date: new Date("3/8/2019") },
{ label: "Date of negative trial publication", date: new Date("7/1/2021") },
{ label: "Date of withdrawal", date: new Date("9/25/2021") }
]
breastPlot = Plot.plot({
width,
marginTop: 20,
y: { domain: [0, 0.35], grid: true, label: null },
marks: [
Plot.rectY(breastData, {
x: "date",
y: "qtr_rate_of_rcd_wt_AAdrug",
interval: "quarter",
fill: "orange",
title: (d) => d.date
}),
Plot.ruleX(
breastDates.map((d) => d.date),
{}
),
Plot.text(breastDates, {
x: (d) => d.date,
y: 0.35,
dy: -10,
text: (d) => d.label
}),
Plot.ruleY([0])
]
})
function getDateFromQuarter(year, quarter) {
// Validate quarter input
if (quarter < 1 || quarter > 4) {
throw new Error("Invalid quarter input. Quarter must be between 1 and 4.");
}
// Calculate the month and day based on the quarter
const month = (quarter - 1) * 3 + 1; // Months: 1, 4, 7, 10
const day = 2;
// Create the date object using the provided year, month, and day
const date = new Date(year, month - 1, day);
return date;
}
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.
