An independent, student-run news organization serving the Brown University community since 1891.
Public
Edited
Oct 2, 2022
<p>${makeSkipAllButton()}</p>
gender = makeQuizDemographics({
title: "How would you describe gender identity?",
results: { Male: 0.45, Female: 0.517, Other: 0.033},
viz: `<iframe title="Gender" aria-label="Pie Chart" id="datawrapper-chart-1RfjE" src="https://datawrapper.dwcdn.net/1RfjE/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
classYear = makeQuizDemographics({
title: "What year are you?",
results: {
"First-year": 0.301,
Sophomore: 0.385,
Junior: 0.201,
Senior: 0.112
},
viz: `<iframe title="Class Year" aria-label="Pie Chart" id="datawrapper-chart-hc7aA" src="https://datawrapper.dwcdn.net/hc7aA/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="414"></iframe>`
})
financialAid = makeQuizDemographics({
title: "What type of financial aid do you receive from Brown?",
results: {
None: 0.562,
"Grants, covering some costs": 0.332,
"Grants, covering all costs": 0.106
},
viz: `<iframe title="What type of financial aid do you receive from Brown?" aria-label="Pie Chart" id="datawrapper-chart-7kh44" src="https://datawrapper.dwcdn.net/7kh44/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="408"></iframe>`
})
varsitySports = makeQuizDemographics({
title: "Are you currently on a varsity sports team?",
results: { Yes: 0.078, No: 0.922 },
viz: `<iframe title="Are you currently on a varsity sports team?" aria-label="Pie Chart" id="datawrapper-chart-wJkm0" src="https://datawrapper.dwcdn.net/wJkm0/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="414"></iframe>`
})
sexualOrientation = makeQuizDemographics({
title: "How would you describe your sexual orientation?",
results: { Heterosexual: 0.675, Gay: 0.072, Bisexual: 0.18, Other: 0.074 },
viz: `<iframe title="How would you describe your sexual orientation?" aria-label="Pie Chart" id="datawrapper-chart-bCJ67" src="https://datawrapper.dwcdn.net/bCJ67/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="414"></iframe>`
})
legacy = makeQuizDemographics({
title:
"Are you a legacy student (i.e. you have a parent, grandparent, or sibling who attended Brown)?",
results: { Yes: 0.142, No: 0.858 },
viz: `<iframe title="Are you a legacy student (i.e. you have a parent, grandparent or sibling who attended Brown)?" aria-label="Pie Chart" id="datawrapper-chart-7shjI" src="https://datawrapper.dwcdn.net/7shjI/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="443"></iframe>`
})
firstGen = makeQuizDemographics({
title: "Do you identify as a first-generation college student?",
results: { Yes: 0.161, No: 0.839 },
viz: `<iframe title="Do you identify as a first-generation college student?" aria-label="Pie Chart" id="datawrapper-chart-81JSG" src="https://datawrapper.dwcdn.net/81JSG/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
domestic = makeQuizDemographics({
title:
"Were you domestic or international applicant when you applied to Brown?",
results: { Domestic: 0.844, International: 0.156 },
viz: `<iframe title="Were you a domestic or international applicant when you applied to Brown?" aria-label="Pie Chart" id="datawrapper-chart-HhXpN" src="https://datawrapper.dwcdn.net/HhXpN/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="373"></iframe>`
})
greekLife = makeQuizDemographics({
title:
"Are you involved with a Greek life organization? (Sorority or fraternity, not program housing)",
results: { Yes: 0.06, No: 0.94 },
viz: `<iframe title="Are you involved with a Greek life organization?" aria-label="Pie Chart" id="datawrapper-chart-JcIaE" src="https://datawrapper.dwcdn.net/JcIaE/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
cpax = makeQuizOpinions({
title:
"Do you approve or disapprove of the way Christina Paxson is handling her job as the president of the University?",
results: {
"Strongly approve": 0.035,
"Somewhat approve": 0.293,
"Somewhat disapprove": 0.365,
"Strongly disapprove": 0.106,
"No opinion": 0.201
},
viz: `<iframe title="Do you approve or disapprove of the way Christina Paxson is handling her job as the president of the University?" aria-label="Pie Chart" id="datawrapper-chart-1QPx0" src="https://datawrapper.dwcdn.net/1QPx0/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
UCS = makeQuizOpinions({
title:
"Do you approve or disapprove of the way Undergraduate Council of Students is handling its job?",
results: {
"Strongly approve": 0.035,
"Somewhat approve": 0.293,
"Somewhat disapprove": 0.365,
"Strongly disapprove": 0.106,
"No opinion": 0.201
},
viz: `<iframe title="Do you approve or disapprove of the way the Undergraduate Council of Students is handling its job?" aria-label="Pie Chart" id="datawrapper-chart-uhuqe" src="https://datawrapper.dwcdn.net/uhuqe/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
UAdministration = makeQuizOpinions({
title:
"Do you approve or disapprove of the way the University communicates plans and policies to students (e.g. campus public health guidelines, three-semester plan, dining and financial aid policy)?",
results: {
"Strongly approve": 0.064,
"Somewhat approve": 0.293,
"Somewhat disapprove": 0.36,
"Strongly disapprove": 0.215,
"No opinion": 0.067
},
viz: `<iframe title="Do you approve or disapprove of how the University communicates plans and policies to students (e.g. campus public health guidelines, three-semester plan, dining and financial aid policy)?" aria-label="Pie Chart" id="datawrapper-chart-7R3Rl" src="https://datawrapper.dwcdn.net/7R3Rl/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
biden = makeQuizOpinions({
title:
"Do you approve or disapprove of the Biden administration's actions since inaguration?",
results: {
"Strongly approve": 0.04,
"Somewhat approve": 0.499,
"Somewhat disapprove": 0.213,
"Strongly disapprove": 0.087,
"No opinion": 0.161
},
viz: `<iframe title="Do you approve or disapprove of the Biden administration’s actions since inauguration?" aria-label="Pie Chart" id="datawrapper-chart-RfHpU" src="https://datawrapper.dwcdn.net/RfHpU/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
examFormat = makeQuizOpinions({
title:
"In what form do you prefer to take exams?",
results: {
"In an untimed, online format": 0.639,
"In a timed, online format": 0.103,
"In-person": 0.258,
},
viz: `<iframe title="In what form do you prefer to take exams?" aria-label="Pie Chart" id="datawrapper-chart-YBb1p" src="https://datawrapper.dwcdn.net/YBb1p/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
blueno = makeQuizOpinions({
title:
"How often do you view online student platforms such as Dear Bleuno and Bleuno Bear Admirers?",
results: {
"A couple of times a day": 0.095,
"Once a week": 0.395,
"Once per semester": 0.233,
"Never": 0.278
},
viz: `<iframe title="How often do you view online student platforms such as Dear Blueno and Blueno Bear Admirers?" aria-label="Pie Chart" id="datawrapper-chart-aEL8S" src="https://datawrapper.dwcdn.net/aEL8S/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
socialGatherings = makeQuizOpinions({
title:
"How often have you attended large social gatherings (20+ people) this semester?",
results: {
"I have not attended any parties this semester": 0.124,
"I have attended 1-3 parties this semester": 0.268,
"On average, I attend parties once or twice per month": 0.208,
"On average, I attend parties once or twice a week": 0.322,
"On average, I attend more than two parties per week": 0.077,
},
viz: `<iframe title="How often have you attended large social gatherings (20+ people) this semester?" aria-label="Pie Chart" id="datawrapper-chart-Inxut" src="https://datawrapper.dwcdn.net/Inxut/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="375"></iframe>`
})
makeSkipAllButton = () => {
const skipAllButton = html`<a href="javascript:void 0">Just show me the data!</button>`;
const forEach = (nodeList, func) => {
for (const node of [...nodeList]) {
func(node);
}
};
skipAllButton.onclick = () => {
forEach(
document.querySelectorAll(
".fall-poll-2021-quiz, .fall-poll-2021-skip-all"
),
(n) => n.remove()
);
forEach(
document.querySelectorAll(".fall-poll-2021-viz"),
(n) => (n.style.display = "block")
);
};
return skipAllButton;
}
makeQuizDemographics = ({ title, answer = "You share results with", results, viz }) => {
const skipButton = html`<button class="btn btn-link ml-2">Show Results</button>`;
skipButton.onclick = () => {
view.querySelector(".fall-poll-2021-quiz").remove();
view.querySelector(".fall-poll-2021-viz").style.display = "block";
view.querySelector(".fall-poll-2021-skip-all").style.display = "block";
};
const view = html`
<h3 style="font-weight: bold">${title}</h3>
<p class="fall-poll-2021-quiz">
${Object.keys(results).map((key) => {
const button = html`<button class="btn btn-primary m-2" style="background-color: #660000; border-color: #660000; font-weight: bold">${key}</button>`;
button.onclick = () => {
const parent = view.querySelector(".fall-poll-2021-quiz");
const percent = (results[key] * 100).toFixed(1);
parent.innerHTML = `${answer} <strong>${percent}%</strong> of poll respondents!`;
view.querySelector(".fall-poll-2021-viz").style.display = "block";
};
return button;
})}
${skipButton}
</p>
<p class="fall-poll-2021-skip-all" style="display: none; font-size: 0.8em">Hate quizzes? ${makeSkipAllButton()}</p>
<div class="fall-poll-2021-viz" style="display: none">${viz}</div>
`;
return view;
}
makeQuizOpinions = ({ title, answer = "You share results with", results, viz }) => {
const skipButton = html`<button class="btn btn-link ml-2">Show Results</button>`;
skipButton.onclick = () => {
view.querySelector(".fall-poll-2021-quiz").remove();
view.querySelector(".fall-poll-2021-viz").style.display = "block";
view.querySelector(".fall-poll-2021-skip-all").style.display = "block";
};
const view = html`
<h3 style="font-weight: bold">${title}</h3>
<p class="fall-poll-2021-quiz">
${Object.keys(results).map((key) => {
const button = html`<button class="btn btn-primary m-2" style="background-color: #660000; border-color: #660000; font-weight: bold">${key}</button>`;
button.onclick = () => {
const parent = view.querySelector(".fall-poll-2021-quiz");
const percent = (results[key] * 100).toFixed(1);
parent.innerHTML = `${answer} <strong>${percent}%</strong> of Brown students!`;
view.querySelector(".fall-poll-2021-viz").style.display = "block";
};
return button;
})}
${skipButton}
</p>
<p class="fall-poll-2021-skip-all" style="display: none; font-size: 0.8em">Hate quizzes? ${makeSkipAllButton()}</p>
<div class="fall-poll-2021-viz" style="display: none">${viz}</div>
`;
return view;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
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.
