An independent, student-run news organization serving the Brown University community since 1891.
Public
Edited
Apr 1, 2022
3 stars
historicalTopGraph = {
const plot = Plot.plot({
width: 250,
height: 200,
marginLeft: 20,
marginRight: 0,
marks: [
Plot.barY(
Object.entries(acceptRate)
.map(([year, rate]) => ({ year: +year, rate }))
.filter((d) => d.year >= 2020),
{ x: "year", y: "rate", fill: "#66282a", dx: -3 }
),
Plot.barY(
Object.entries(rd_acceptRate).map(([year, rate]) => ({
year: +year,
rate
})),
{ x: "year", y: "rate", dx: 3, fill: "#c33" }
),
Plot.ruleY([0])
],
x: {
paddingInner: 0.4,
paddingOuter: 0.05,
label: "Class Year"
},
y: {
grid: true,
label: "Percent of students accepted",
ticks: 20,
tickFormat: (d) => (d % 1 === 0 ? d + "%" : ""),
domain: [0, 9.5]
}
});
plot.querySelectorAll("text").forEach((el) => {
el.style.fontSize = "7";
});
plot.style.width = 800;
// const legend = new SVGForeignObjectElement();
// legend.appendChild(
// Plot.legend({
// color: {
// domain: ["Combined", "Regular Decision"],
// range: ["#66282a", "#c33"]
// }
// })
// );
// plot.appendChild(legend);
return plot;
}
firstGenChart = DonutChart(
[
{ name: "First-Gen", value: 17 },
{ name: "Not First-Gen", value: 100 - 17 }
],
{
name: (d) => d.name,
value: (d) => d.value,
title: (d) => "",
colors: ["#66282a", "#b3b7bb"],
width: 150,
height: 150,
innerRadius: 50
}
)
html`<div style="position: relative; width: 1000px; height: 558px; border: 1px solid black; transform: scale(${
width / 1000
}); transform-origin: top left">
<div style="position: absolute; bottom: 50%; left: 0; transform: scale(2) translateY(50%); transform-origin: bottom left">
${(() => {
// const newGraph = historicalTopGraph.cloneNode(true);
// newGraph.querySelectorAll("text").forEach((el) => {
// el.style.fontSize = "7";
// });
// return newGraph;
})()}
</div>
<div style="position: absolute; top: 60px; left: 100px; transform: scale(1.5); transform-origin: top left">${Plot.legend(
{
color: {
domain: ["Combined", "Regular Decision"],
range: ["#66282a", "#c33"]
}
}
)}</div>
<div style="position: absolute; left: 60%; top: 20%; transform: rotate(0.)">
${plmeChart.cloneNode(true)}
</div>
</div>`
Plot.plot({
marks: [
Plot.barY(
Object.entries(firstgen).map(([year, value]) => [+year, value]),
{
x: "0",
y: "1",
fill: "#6f4f2f",
opacity: (d) => (d[0] === 2026 ? 1 : 0.8)
}
),
Plot.ruleY([0])
],
x: {
label: null
},
y: {
domain: [0, 24],
ticks: 25,
tickFormat: (d) => (d % 3 ? "" : d),
grid: true,
label: "First-generation college students, % of accepted student body",
labelAnchor: "center"
}
})
// thoroughly uninteresting
biggest_states = ({
2023: ["California", "New York", "Massachusetts", "New Jersey", "Texas"],
2022: ["California", "New York", "Massachusetts", "New Jersey", "Texas"],
// 2018: same but TX+FL are tied
2017: ["California", "New York", "Massachusetts", "New Jersey", "Texas"]
})
rd_acceptRate_check = Object.entries(
total_applicants
).map(([year, applicants]) => [year, (offers[year] / applicants) * 100])
// .filter(([year, error]) => Math.abs(error - rd_acceptRate[year]) > 0.5)
Plot.plot({
marks: [Plot.lineY(Object.entries(offers), { x: "0", y: "1" })],
y: { domain: [0, 3000], grid: true }
})
Plot.plot({
marginTop: 20,
marginBottom: 35,
marginLeft: 45,
marginRight: 60,
height: 350,
x: {
domain: d3.extent(countryData, (d) => d.year),
tickFormat: (d) => String(d >= 2022 ? d : d - 3),
ticks: [...d3.group(countryData, (d) => d.year).keys()],
label: null
},
y: {
axis: null,
domain: [6.5, 1]
},
color: {
domain: d3
.groupSort(
countryData,
(v) => v[0].place,
(d) => d.country
)
.reverse(),
range: countryColors
},
// slice out individual labels
marks: [
bumpMarks(countryData, {
x: "year",
y: "place",
z: "country",
reverse: false,
fontSize: 20,
r: 15
}),
Plot.ruleX([2021.5], {
y1: -0.1,
y2: 6.75,
stroke: "#ccc",
strokeDasharray: "8"
})
]
})
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.
