diff --git a/2026/endowment-breakdown/static/css/main.css b/2026/endowment-breakdown/static/css/main.css
index 2c1e9a68..1e220147 100644
--- a/2026/endowment-breakdown/static/css/main.css
+++ b/2026/endowment-breakdown/static/css/main.css
@@ -404,7 +404,7 @@ g.sankey {
#chart-div {
height: 50vh;
width: auto;
- margin-top: -50px;
+ margin-top: -30px;
}
#chart-container {
diff --git a/2026/endowment-breakdown/static/js/main.js b/2026/endowment-breakdown/static/js/main.js
index b79cf923..f0d81bec 100644
--- a/2026/endowment-breakdown/static/js/main.js
+++ b/2026/endowment-breakdown/static/js/main.js
@@ -85,7 +85,7 @@ function createLayout(title = '', caption = '', showlegend = false) {
title: {
text: title,
x: 'center',
- y: isMobileLike ? 0.82 : 0.93, // vertical position (1 = top, 0 = bottom)
+ y: isMobileLike ? 0.85 - ((1000 - screenHeight) / 1200) ** 2 : 0.93, // vertical position (1 = top, 0 = bottom)
font: {
size: titleFontSize
},
@@ -102,7 +102,7 @@ function createLayout(title = '', caption = '', showlegend = false) {
xref: 'paper',
yref: 'paper',
x: 1, // right align
- y: -0.08 - isMobileLike * 0.02, // move below the x-axis
+ y: -0.08 - isMobileLike * 0.04, // move below the x-axis
showarrow: false,
xanchor: 'right',
yanchor: 'top',
@@ -270,14 +270,16 @@ function circleChart(data, variable) {
size: groupedData.map(
(val) =>
Math.sqrt(val.amount_thousands) /
- (isMobileLike ? 2 : 0.85) // scale by square root for proportionality of area (instead of radius)
+ (isMobileLike
+ ? 1.9 + ((1000 - screenHeight) / 350) ** 5
+ : 0.85) // scale by square root for proportionality of area (instead of radius)
),
color: '#800000',
opacity: 1
},
textfont: {
color: 'white',
- size: bodyFontSize
+ size: isMobileLike ? bodyFontSize * 0.85 : bodyFontSize
},
text: groupedData.map((val) =>
val.amount_thousands < 10000
@@ -328,7 +330,7 @@ function facetChart(data) {
type: 'scatter',
mode: 'markers+text',
x: isMobileLike
- ? [2010, 2014.5, 2018, 2022]
+ ? [2008.5, 2014, 2017.8, 2022.5]
: [2015.8, 2018.4, 2020.6, 2023],
y: sizeLegendValues.map(() => ''),
marker: {
@@ -581,6 +583,10 @@ function open_url(data) {
}
}
+function captionAdjust() {
+ return (screenHeight / 670) ** 10;
+}
+
function detectMobile() {
return (
window.matchMedia('(max-width: 768px)').matches &&
@@ -616,6 +622,13 @@ const colorbook = {
}
};
+// Update on resize
+let screenHeight = window.innerHeight;
+
+window.addEventListener('resize', () => {
+ screenHeight = window.innerHeight;
+});
+
const sankeyTitle = 'Sources of Revenue, Fiscal Year 2025';
const sankeyCaption =
'Hospital services ($4.7B) are excluded. Net assets (total assets minus total liabilities) for FY25 were $633.8M.
Source: University of Chicago financial statement for fiscal year 2025';
@@ -644,7 +657,7 @@ const sequence = {
...layout,
width: isMobileLike ? 700 : null,
margin: {
- b: isMobileLike ? 60 : 120,
+ b: isMobileLike ? 60 + captionAdjust() : 120,
l: isMobileLike ? 20 : 20
},
title: {
@@ -670,7 +683,7 @@ const sequence = {
...layout,
width: isMobileLike ? 700 : null,
margin: {
- b: isMobileLike ? 60 : 120,
+ b: isMobileLike ? 60 + captionAdjust() : 120,
l: isMobileLike ? 20 : 20
},
title: {
@@ -696,7 +709,7 @@ const sequence = {
...layout,
width: isMobileLike ? 700 : null,
margin: {
- b: isMobileLike ? 60 : 120,
+ b: isMobileLike ? 60 + captionAdjust() : 120,
l: isMobileLike ? 20 : 20
},
title: {
@@ -722,7 +735,7 @@ const sequence = {
...layout,
width: isMobileLike ? 700 : null,
margin: {
- b: isMobileLike ? 60 : 120,
+ b: isMobileLike ? 60 + captionAdjust() : 120,
l: isMobileLike ? 20 : 20
},
title: {
@@ -750,7 +763,7 @@ const sequence = {
t: isMobileLike ? 60 : 40,
r: isMobileLike ? 0 : 20,
l: 0,
- b: isMobileLike ? 60 : 140
+ b: isMobileLike ? 60 + captionAdjust() : 140
},
annotations: [
layout['annotations'][0], // keep caption
@@ -784,7 +797,7 @@ const sequence = {
margin: {
l: 25,
r: isMobileLike ? 25 : 0,
- b: isMobileLike ? 40 : 150
+ b: isMobileLike ? 45 + captionAdjust() : 150
},
xaxis: {
showgrid: true,
@@ -827,7 +840,7 @@ const sequence = {
margin: {
l: isMobileLike ? 15 : 25,
r: isMobileLike ? 20 : 25,
- b: isMobileLike ? 40 : 75,
+ b: isMobileLike ? 40 + captionAdjust() : 75,
t: isMobileLike ? 100 : 90
},
xaxis: {
@@ -858,8 +871,8 @@ const sequence = {
color: 'black'
},
showarrow: false,
- text: ' Total in endowment
$10.9B',
- x: isMobileLike ? -60 : -30,
+ text: 'Total in endowment
$10.9B',
+ x: isMobileLike ? -65 : -30,
y: 200
} // add additional annotation
]
@@ -911,7 +924,7 @@ const sequence = {
margin: {
l: isMobileLike ? 50 : 220,
r: isMobileLike ? 25 : 0,
- b: isMobileLike ? 60 : 100
+ b: isMobileLike ? 60 + captionAdjust() : 100
},
xaxis: {
range: [0.01, 1],
@@ -1007,12 +1020,14 @@ const sequence = {
margin: {
l: isMobileLike ? 120 : 230,
r: isMobileLike ? 25 : 0,
- b: isMobileLike ? 60 : 110
+ b: isMobileLike ? 60 + captionAdjust() : 110
},
title: {
...layout.title,
x: isMobileLike ? 0.08 : 0.26,
- y: isMobileLike ? 0.78 : 0.9 // vertical position (1 = top, 0 = bottom)
+ y: isMobileLike
+ ? 0.78 - ((1000 - screenHeight) / 1000) ** 2.5
+ : 0.9 // vertical position (1 = top, 0 = bottom)
}
},
config