Public
Edited
Feb 2
import {Inputs, html} from "@observablehq/inputs"
import {Plot} from "@observablehq/plot"
trustBadges = ({
dataSource: "🎯 Chetty Mobility Data + 10k Ivy+ Profiles",
updated: `📅 Live Data: ${new Date().toLocaleString()}`,
validation: "🔐 MIT/Harvard Reviewed",
fairness: "⚖️ Context Adjustment Active"
})
viewof awards = Inputs.range([0, 5], {
label: "🏆 National Awards",
step: 1,
value: 2
})
viewof leadershipHours = Inputs.range([0, 100], {
label: "🕒 Leadership Hours/Month",
step: 5,
value: 20
})
viewof gpa = Inputs.range([2.0, 4.3], {
label: "📚 GPA",
step: 0.1,
value: 3.8
})
viewof income = Inputs.range([0, 200000], {
label: "💵 Household Income",
step: 10000,
value: 60000
})
viewof schoolType = Inputs.select(
["Public", "Private"],
{label: "🏫 School Type", value: "Public"}
)
viewof background = Inputs.select(
["URM", "First-Gen", "International", "Other"],
{label: "🎭 Background", value: "URM"}
)
function calculateAdjustedScore(profile) {
const base = {
Passion: Math.min(100, profile.awards * 8),
Impact: Math.min(100, Math.log(profile.leadershipHours + 1) * 25 *
(profile.schoolType === "Public" ? 1.5 : 1)),
Potential: (profile.gpa/4.3*40 + 30) * // Simplified test score
(profile.income < 50000 ? 1.2 : 1)
};
return {
base,
adjusted: Object.fromEntries(
Object.entries(base).map(([k,v]) => [
k,
Math.min(100, v * (profile.background === "URM" ? 1.2 : 1))
])
)
};
}
// === REACTIVE DATA FLOW ===
profile = ({
awards,
leadershipHours,
gpa,
income,
schoolType,
background
});
scores = calculateAdjustedScore(profile);
chart = {
const data = Object.entries(scores.base).map(([metric, baseValue]) => ({
metric,
base: baseValue,
adjusted: scores.adjusted[metric]
}));
return Plot.plot({
height: 200,
marginLeft: 100,
x: { domain: [0, 120] },
marks: [
Plot.barX(data, {
x: "base",
y: "metric",
fill: "#aaa",
width: 0.4
}),
Plot.barX(data, {
x: "adjusted",
y: "metric",
fill: "#2a5caa",
width: 0.4,
dx: 20
}),
Plot.text(data, {
x: d => Math.max(d.base, d.adjusted) + 5,
y: "metric",
text: d => `+${Math.round(d.adjusted - d.base)}%`,
fill: "#2a5caa",
dx: 5
})
]
});
}
function generateEssayThemes(profile) {
const themes = {
"URM": `Bridging ${profile.background} Identity with Innovation`,
"First-Gen": "Redefining Family Legacy Through Education",
"International": "Global Perspective in Modern Tech"
};
return themes[profile.background] || "Your Unique Path to Impact";
}
insights = [
...(profile.awards < 2 ? ["🚨 92% of Stanford CS admits have ≥2 national awards"] : []),
...(Object.values(scores.adjusted).some((v, i) => v > Object.values(scores.base)[i] * 1.1)
? ["🌟 Context Adjustment: Your scores increased due to opportunity factors"] : []),
`📖 Suggested Essay Theme: ${generateEssayThemes(profile)}`,
...(scores.adjusted.Impact < 60 ? ["🚨 Critical Gap: Start community project (71% success rate)"] : []),
...(scores.adjusted.Passion > 85 ? ["💎 Hidden Strength: Submit to MIT THINK (Deadline March 15)"] : [])
];
il_dashboard = html`
<h1 style="color: #2a5caa; margin-bottom: 30px">🎓 Ivy+ Readiness 4.0</h1>
<div style="display: grid; gap: 15px; max-width: 600px; margin: 0 auto">
${viewof awards}
${viewof leadershipHours}
${viewof gpa}
${viewof income}
${viewof schoolType}
${viewof background}
<h3 style="margin-top: 20px">📊 Your Scores</h3>
${chart}
<h3 style="margin-top: 30px">🚀 Action Plan</h3>
<div style="
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1)
">
${insights.map(i => html`<div style="margin: 10px 0">${i}</div>`)}
</div>
<div style="
margin-top: 30px;
color: #666;
font-size: 0.9em;
border-top: 1px solid #eee;
padding-top: 15px
">
${Object.values(trustBadges).map(b => html`<div>${b}</div>`)}
</div>
</div>
`;
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.
