Public
Edited
Mar 8, 2024
Plot.plot({
y: { label: "density" },
x: { label: "age" },
color: { legend: true },
facet: { data: age_bins, y: "type", marginRight: 100 },
marks: [
Plot.rectY(age_bins, {
x1: "age_start",
x2: "age_end",
y1: (d) => d.density / (d.age_end - d.age_start),
fill: "type",
mixBlendMode: "multiply"
})
]
})
survey_data = raw_survey_data
age_bins = [...age_bins_all, ...age_bins_maintainers]
age_bins_all = {
const rolled = d3
.flatRollup(
survey_data.filter((d) => d.AGE !== "NA"),
(v) => v.length,
(d) => d.AGE
)
.map(([age, count]) => ({ ...to_age_range(age), count, type: "all" }));
rolled.sort((a, b) => a.age_start - b.age_start);
return rolled.map((d) => ({
...d,
density: d.count / d3.sum(rolled.map((d) => d.count))
}));
}
age_bins_maintainers = {
const rolled = d3
.flatRollup(
survey_data.filter(
(d) =>
d.AGE !== "NA" &&
d["CONTRIBUTOR.TYPE.PROJECT.MAINTENANCE"] === "Frequently" &&
(d["OSS.IDENTIFICATION"] == "Strongly agree" ||
d["OSS.IDENTIFICATION"] == "Somewhat agree")
),
(v) => v.length,
(d) => d.AGE
)
.map(([age, count]) => ({
...to_age_range(age),
count,
type: "maintainers"
}));
rolled.sort((a, b) => a.age_start - b.age_start);
return rolled.map((d) => ({
...d,
density: d.count / d3.sum(rolled.map((d) => d.count))
}));
}
to_age_range = (s) =>
s === "NA"
? { age_start: null, age_end: null }
: s.startsWith("17")
? { age_start: 13, age_end: 18 }
: s.startsWith("65")
? { age_start: 65, age_end: 100 }
: {
age_start: Number(s.split(" ")[0]),
age_end: Number(s.split(" ")[2]) + 1
}
survey_data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
survey_data
437 / 699
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.
