Style-guide layout

Live inequality tracking with more country filters, arrows, and compare views.

The board fetches the latest published Eurostat values for the Gini coefficient, the S80/S20 ratio, and the income share of the bottom 40%. Preset country groups, search, compare mode, and arrow deltas make country navigation much faster.

Scope

EU-27 and member states

The current board context appears here after load.

Three Eurostat feeds, annual data, browser-side parsing, and inline SVG charts.

EU-27 Gini

-

Latest published value

EU-27 S80/S20

-

Latest published value

Bottom 40% share

-

Latest published value

Selected year coverage

-

Countries in the active view

Member explorer

Flag-first country buttons stay tied to the active metric, year, preset, and search query.

Showing all member states.

Focus country

-

Current metric value

Change vs previous year

-

Directional shift

Gap vs EU-27

-

Difference to the EU aggregate

Gap vs compare country

-

Selected minus compare

Metric trend

Selected country against the compare country and EU-27.

Focus countryCompare countryEU-27 aggregate

Country ranking

Filtered by preset, search, view, and year before ranking.

Cross-metric view

The active metric is plotted against a second live metric.

Focus countryCompare countryEU-27 aggregateOther visible countries

Rolling average

Three-year rolling averages reduce noise.

Comparison heatmap

Dense live table with arrows, gaps, and all three indicators.

Country	Rank	Metric	Delta	Gap vs EU	Gini	S80/S20	Bottom 40%

The active metric cell is tinted by relative position within the filtered country set.

This single HTML file reloads the latest published Eurostat inequality values whenever it loads or refreshes.

Labour market view

Gender pay gap tracking across the EU-27.

This tab uses Eurostat's gender pay gap dataset to show the selected country's level, the EU-27 benchmark, the cross-country ranking, and the longer-term trend against the Union aggregate.

Dataset

sdg_05_20

The latest wage-pay-gap year will appear here after load.

Gender pay gap values are periodic Eurostat releases, not real-time labour market ticks.

EU-27 pay gap

-

Latest published value

Selected country

-

Selected year value

Gap vs EU-27

-

Selected country minus EU-27

Countries available

-

Countries with a wage-gap value

Wage controls

Switch between countries and publication years while keeping the page in a single-file flow.

Country

Year

Country ranking

Lower gender pay gaps rank better.

Trend vs EU-27

Selected country against the EU aggregate across all available years.

Selected countryEU-27 aggregate

Top and bottom performers

Lower values indicate a smaller gender pay gap.

Top performers

Bottom performers

Method note

The wage-disparity tab uses the Eurostat Sustainable Development Goal dataset for the unadjusted gender pay gap. Coverage is annual and can differ by country, so missing observations are left out rather than estimated.

The selected-country trend compares only the country and the EU-27 aggregate to keep the reading clean. This page intentionally reuses the same browser-side JSON-stat parsing and SVG rendering approach as the inequality dashboard.

This view reloads directly from Eurostat whenever the page refreshes.

About this file

Methodology and implementation notes

The board stays intentionally narrow. It focuses on a few official inequality indicators that are easy to compare across countries and over time while keeping everything inside a portable single HTML file.

Rendering

Inline CSS, JS, and SVG

Eurostat is the only data source; the browser handles fetch, parsing, and drawing.

No external charting library or backend is required.

Purpose

The redesign applies the local bright EU-policy style guide, adds more filters between countries, and exposes directional arrows so the board is easier to scan and compare.

The file now covers both income inequality and wage disparity, while keeping the compare-country workflow and the single-file browser-side implementation intact.

What "live" means

Each load and refresh requests the latest published Eurostat payload for the configured series. The page therefore tracks new releases as they appear on Eurostat, but it is not a second-by-second stream.

The status card exposes dataset update timestamps and the active selection context.

Datasets used

Dataset code	Indicator	Role in dashboard
tessi190	Gini coefficient of equivalised disposable income	Main ranking metric, compare trend, and heatmap value.
tessi180	Income quintile share ratio (S80/S20)	Cross-metric comparison, heatmap context, and alternative ranking metric.
sdg_10_50	Income share of the bottom 40% of the population	Complementary equity signal for cards, scatter logic, and heatmap context.
sdg_05_20	Gender pay gap	Second dashboard tab for wage disparity ranking, trend comparison, and top/bottom country views.

Interpretation rules

Lower is better for the Gini coefficient and S80/S20.
Higher is better for the bottom 40% share.
Arrow colors follow improvement or deterioration relative to the active metric logic.
Preset filters only change visible countries; the live fetch remains the same.

Technical method

Data is requested from the Eurostat Statistics API as JSON-stat.
The parser flattens multidimensional responses into reusable records.
Charts are rendered as inline SVG to keep the file self-contained.
Flags are referenced from FlagCDN to match the local style guide.