plot_height = 1000
lockdownData = [
{name: "Groups 1.0", startDate: new Date("1950", "2", "24", "6"), endDate: new Date("1980", "5", "1", "6"), description: "When groups are about persistent.\nIt was a difficult time."}, // zero-indexed month means "3" is March and "5" is June
{name: "Groups 2.0", startDate: new Date("1981", "6", "9", "6"), endDate: new Date("2000", "9", "28", "6"), description: "The second time around was easier and harder. We knew the drill, routines were easier, but we’d burnt through a lot more of our reserves.\nIt was 110 days."}, // zero-indexed month means "6" is Jul and "9" is October
{name: "Groups 3.0", startDate: new Date("2001", "9", "28", "6"), endDate: new Date("2020", "10", "8", "6"), description: "We continued to be trapped in Melbourne for another two weeks after lockdown “ended”."}, // zero-indexed month means "9" is October and "10" is November
]
sourceData = FileAttachment("measuring_groups@1.csv").csv()
.then(data => {
const timeParser = d3.timeParse("%d %b %Y");;
return data.map(row => ({
date: timeParser(row.date),
eventName: row.eventName,
eventDescription: row.eventDescription,
sharedOrPersonal: row.sharedOrPersonal,
contribType: row.contrib_type,
readLvl: row.read_lvl
}))
})
data = sourceData.filter(d => {
if (eventsSelection === "Bib") { return d.sharedOrPersonal === "Bib"; }
else if (eventsSelection === "CSS") { return d.sharedOrPersonal === "CSS"; }
else if (eventsSelection === "N") { return d.sharedOrPersonal === "N"; }
else { return true };
})
params = {
let output = {};
output["smallScreenSize"] = 768;
output["mediumScreenSize"] = 940;
output["svg"] = {
"width": width,
"height": plot_height // Roughly relative to number of data points but doesn't factor in the full timeline scale such as clustering or spread out data
};
output["margin"] = {
"top": 104,
"right": 96,
"bottom": 192,
"left": 240,
"axisLeft": 144,
};
output["plot"] = {
"x": output["margin"]["left"],
"y": output["margin"]["top"],
"width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"],
"height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"]
};
output["smallScreenMargin"] = {
"top": 60,
"right": 8,
"bottom": 192,
"left": 8,
"axisLeft": 144,
};
output["smallScreenPlot"] = {
"x": output["margin"]["left"],
"y": output["margin"]["top"],
"width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"],
"height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"]
};
output["marker"] = {
"radius": 4
}
output["date"] = {
"offset": output["marker"]["radius"] * 2
}
output["event"] = {
"offset": output["marker"]["radius"] * 6
}
output["smallScreenEvent"] = {
"offset": output["marker"]["radius"] * 4
}
return output;
}
import {radio} from "@jashkenas/inputs"
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.
