PraxisAI
Sign in
Data visualizationmedium

Household energy explorer (data visualisation)

A front-end-only dashboard over a year of half-hourly smart-meter data: zoomable time series, heat map, tariffs and honest gaps.

Suggested effort
~4h focused work
Window
24 hours
Starts from
An empty repo
Stack
Your choice
Sign in to start this build →

Opens in a new tab. The clock starts when you press Start inside the environment, not before, and your workspace is kept while you step away.

Time window 24 hours. Suggested effort about 4 hours.

Context

A smart-meter company wants to show customers where their electricity goes. Build a front-end-only dashboard that explores a year of half-hourly readings for one home.

Core requirements

  • A seeded generator script that writes public/data/readings.csv (one year, half-hourly: timestamp, kwh, tariff), with realistic patterns: daily peaks, a weekend shape, seasonal heating, and a few missing intervals.
  • Overview: total kWh and cost for the selected range, compared with the previous period of equal length.
  • A time-series chart with zoom or brush selection and sensible aggregation (half-hour, day, week) for the range shown.
  • A weekday-by-hour heat map showing when energy is used.
  • Tariff breakdown (peak and off-peak) as a bar or stacked chart.
  • Gaps in the data are shown as gaps, never silently interpolated.

Acceptance criteria

  • Loads and stays interactive with the full year (17,520 rows) without freezing the page.
  • Aggregation and comparison logic lives in pure functions with unit tests (time zones and the daylight-saving change day included).
  • Charts have axis labels, units, tooltips and an accessible text alternative (a summary table or description).
  • Works on a phone (375px wide) and on a laptop.

Stretch goals (optional)

  • Upload your own CSV with validation and clear error messages.
  • Anomaly highlighting (for example, usage more than 3 standard deviations above the same hour's mean).
  • Shareable URLs that encode the selected range and view.

Constraints

  • Front end only; no server needed beyond a static file server.
  • Any charting approach. Suggested: D3, Observable Plot, Recharts, Chart.js, or hand-written SVG or canvas.

Deliverables (every project)

  • Source code committed in this repository (the grader diffs against the first commit).
  • README.md that replaces the stub, with: how to install, run and test it (copy-pasteable commands); the decisions and trade-offs you made; what you would do next with more time; and a short note on how you used the AI agent (what you delegated, what you checked or rewrote).
  • Automated tests that run with a single command (npm test, pytest, go test ./... or cargo test).
  • No secrets in the repository. Anything configurable reads from environment variables with safe defaults.

Ground rules

  • The 24-hour clock is a window, not a workload. Stop at roughly the suggested effort, then write down what you would do next. A small, finished, tested core beats a large unfinished one.
  • Use the AI agent as much or as little as you like: every prompt is recorded and the report shows how it was used. You are judged on the result and on whether you understood and verified what the agent produced.
  • The work is yours. PraxisAI uses it only to produce your assessment report.