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"
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.