Vibe Coding #4 — Data Analytics Dashboard with Svelte & Python | ENTSO-E API Energy Data

Result

An interactive app to explore European energy data — hover over 45+ ENTSO-E bidding zones to see prices update, compare generation mix, and visualize cross-border electricity flows in real time.

The problem

European energy data exists through ENTSO-E’s Transparency Platform, but it’s buried behind complex API calls and XML responses
Existing visualization tools are mostly static PDFs or outdated government portals
In Vibe Coding #3 we built python-entsoe to simplify data access, but there’s still no interactive frontend to explore it
Comparing generation mix, prices, or cross-border flows across bidding zones requires writing code every time

The solution

Building an interactive app from scratch with Svelte, D3.js, and a FastAPI backend powered by python-entsoe — where every interaction triggers dynamic calculations:

Interactive SVG map of Europe with 45+ ENTSO-E bidding zones
Dynamic hover tooltips with live price and generation data
Generation mix breakdown (solar, wind, nuclear, gas, hydro) per zone
Cross-border electricity flow visualization between countries
Day-ahead price curves with hourly granularity and multi-zone comparison
All data fetched live from ENTSO-E via our open-source library

Architecture

Browser

Interactive energy dashboard

Svelte App

•EnergyMap (D3.js)

•PriceChart

•FlowDiagram

•GenerationMix

REST API

FastAPI Backend

•/generation/{zone}

•/prices/{bidding_zone}

•/flows/{zone_from}/{zone_to}

python-entsoe

github.com/datons/python-entsoe

ENTSO-E Transparency Platform

45+ bidding zones, real-time data

Stack

Svelte · D3.js · FastAPI · python-entsoe