Princeton Day School
Education · Data dashboard
- Role UI Developer, MCG Strategic
- Stack Vue + Chart.js
- Scope Front-end build + data integration
- Dashboard
- Data Viz
- Education
The work, up close
The brief
Princeton Day School wanted its sustainability work visible: a dashboard that turns the campus's building telemetry into a story anyone can explore. I built the Vue front end and wired it to an external metering API, turning live electricity, water, and gas readings into counters and graphs.
What I built
-
01
Built the front end as a Vue single-page app: a living landing page and a deep-dive section for each utility.
-
02
Integrated the external metering API: the site reads live campus meter history for electricity, water, and gas straight from the source.
-
03
Built the graphs with Chart.js: live totals on the landing page, and per-meter history charts with selectable time ranges on every utility page.
-
04
One utility template serves all three sections, so adding a meter is configuration, not a rebuild.
Where it landed
The dashboard shows live readings from the campus meters, with history charts for every meter.