// subtitle = "What is the ontological status of groups across fields of studies?"
// TIME PERIODS
lockdownData = [
{name: "Grontology 1.0", startDate: new Date("1950", "2", "24", "6"), endDate: new Date("1980", "5", "1", "6"), description: ""},
{name: "Grontology 2.0", startDate: new Date("1981", "6", "9", "6"), endDate: new Date("2000", "9", "28", "6"), description: ""},
{name: "Grontology 3.0", startDate: new Date("2001", "9", "28", "6"), endDate: new Date("2020", "10", "8", "6"), description: ""},
]
sourceData = FileAttachment("the_ontology_of_groups@3.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 === "S") { return d.sharedOrPersonal === "S"; }
else if (eventsSelection === "φ") { return d.sharedOrPersonal === "φ"; }
else if (eventsSelection === "CGS") { return d.sharedOrPersonal === "CGS"; }
else { return true };
})
data2 = data.filter(d => {
if (methodSelection === "💡") { return d.contribType === "💡"; }
else if (methodSelection === "🗺️") { return d.contribType === "🗺️"; }
else if (methodSelection === "📚") { return d.contribType === "📚"; }
else if (methodSelection === "📊") { return d.contribType === "📊"; }
else { return true };
})
y = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([params.plot.y, params.plot.height]);
axis = {
const yAxis = width >= params.smallScreenSize ?
d3.axisRight(y)
.tickPadding(-(params.margin.axisLeft))
.tickSizeOuter(0)
.tickSizeInner(-(params.margin.axisLeft))
:
d3.axisRight(y)
.tickPadding(-(params.smallScreenMargin.axisLeft))
.tickSizeOuter(0)
.tickSizeInner(-(params.smallScreenMargin.axisLeft))
.tickFormat(d3.timeFormat('%b'));
return {y: yAxis};
}
function halo(text) {
text.clone(true)
.each(function() { this.parentNode.insertBefore(this, this.previousSibling); })
.attr("aria-hidden", "true")
.attr("fill", "none")
.attr("stroke", backgroundColor)
.attr("stroke-width", 24)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round")
.style("text-shadow", `-1px -1px 2px ${backgroundColor}, 1px 1px 2px ${backgroundColor}, -1px 1px 2px ${backgroundColor}, 1px -1px 2px ${backgroundColor}`);
}
params = {
let output = {};
output["smallScreenSize"] = 768;
output["mediumScreenSize"] = 940;
output["svg"] = {
"width": width,
"height": range_h
};
output["margin"] = {
"top": 40,
"right": 96,
"bottom": 40,
"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.
