JavaScript Drill-Down Nord Pool Map Dashboard

This dashboard visualizes day-ahead market data from the Nord Pool energy exchange. It provides a geographic overview of the next day's planned power generation across the Nordic-Baltic region.

You can click any bidding zone (small charts) or sidebar row to drill down into its detailed energy mix below, or use the buttons to filter specific energy sources globally. A red Day-ahead Price line overlays all charts, making it easy to spot market correlations, such as price drops during high wind availability.

The application uses a Map chart for the geographical background, while the bidding zone boundaries are rendered using a PolygonSeries within a transparent ChartXY overlay. This allows for custom highlighting and styling of GeoJSON shapes that differ from the standard map regions.

The Map chart's geospatial coordinate system is synchronized with the XY axes:

mapChart.addEventListener('viewchange', (event) => {
    const { latitudeRange, longitudeRange, margin } = event
    // Sync the XY overlay axes with the Map viewport
    chartXY.getDefaultAxisX().setInterval({ start: longitudeRange.start, end: longitudeRange.end })
    chartXY.getDefaultAxisY().setInterval({ start: latitudeRange.start, end: latitudeRange.end })
    // Update the HTML mini-chart positions using the synchronized axes
    updateChartPositions()
})

Data sources used in this example:
ENTSO-E Transparency Platform
Nord Pool Day-ahead Prices
GitHub - Python client for the ENTSO-E API