Unlisted
Edited
Jul 21, 2024
Importers
statusPlotFiltered = {
// const sameInstitutionData = nscT21LongFiltered.find(
// (d) => d.category === "completion_at_same_institution_percent"
// );
// const sortedData = nscT21LongFiltered.sort(
// (a, b) => b.percentage - a.percentage
// );
const categoryOrder = [
// "no_longer_enrolled_anywhere_percent",
// "still_enrolled_anywhere_percent",
// "completion_at_different_2yr_percent",
// "completion_at_different_4yr_percent",
// "completion_at_same_institution_percent"
"completion_at_same_institution_percent",
"completion_at_different_4yr_percent",
"completion_at_different_2yr_percent",
"still_enrolled_anywhere_percent",
"no_longer_enrolled_anywhere_percent"
];
const categoryMapping = {
no_longer_enrolled_anywhere_percent: "No Longer Enrolled",
still_enrolled_anywhere_percent: "Still Enrolled",
completion_at_different_2yr_percent: "Completed at Other (2-Year)",
completion_at_different_4yr_percent: "Completed at Other (4-Year)",
completion_at_same_institution_percent: "Completed at Original University" //,
// total_completion_percent: "Overall Graduation Rate"
};
const reversedRdYlBu = [
"#4575b4",
"#91bfdb",
"#ffffbf",
"#fc8d59",
"#d73027"
];
const colorMapping = {};
categoryOrder.forEach((category, index) => {
colorMapping[category] = reversedRdYlBu[index];
});
const nscT21LongPub4yrFiltered = nscT21LongPub4yr.filter(
(d) => d.cohort_year === "2017" && d.cohort_size >= 30000
);
//const groupData = d3.group(nscT21LongFiltered, { key: "category" });
return addTooltips(
Plot.plot({
marginTop: 35,
marginBottom: 50,
marginLeft: 100,
marginRight: 50,
title:
"6-Year graduation rates across states with more than 30,000 students in 2017 cohort: Public 4-year institutions only",
caption: caption(
"Data Source: [National Student Clearinghouse](https://nscresearchcenter.org/completing-college/)"
),
//subtitle: "Subtitle",
width: Math.max(width, 600),
height: 500,
x: {
percent: false,
grid: false,
label: "Percentage (%)",
tickFormat: d3.format("0.0%")
},
y: {
grid: true,
label: null
},
color: {
//scheme: "RdYlBu", //"Paired", //"Set3",
legend: true, // to show legend for categories
tickFormat: (d) => categoryMapping[d],
order: categoryOrder, //.reverse(),
domain: categoryOrder, //.reverse()
range: reversedRdYlBu,
mapping: colorMapping
},
style: {
font: "bold 12px sans-serif"
},
fill: {
domain: categoryOrder
},
marks: [
Plot.barX(nscT21LongPub4yrFiltered, {
// filter: (d) => d.cohort_year === "2017" && d.cohort_size >= 30000,
x: "percentage",
// y: "state",
y: (d) => d.state,
fill: "category",
fillOpacity: 0.75,
//index: nscT21LongFiltered.index,
// offset: "normalize",
sort: { y: "-x", reduce: "first" },
title: (d) =>
`${categoryMapping[d.category]}\nState: ${
d.state
}\nCohort Size: ${d3.format(",")(
d.cohort_size
)}\nPercentage of Cohort: ${d3.format("0.0%")(d.percentage)}`
}),
Plot.text(nscT21LongPub4yrFiltered, {
filter: (d) => d.percentage > 0.049,
x: (d) => Number(d.label_position), // Convert string to number
y: (d) => d.state,
fontSize: 14,
// z: "category",
text: (d) => d3.format("0.0%")(d.percentage) //,
})
]
})
);
}
// // automatically add tooltips to every Plot in a notebook
// // this allows users to do import { Plot } from "@mkfreeman/plot-tooltip
// Plot = tooltipPlugin(await require("@observablehq/plot"))
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.
