The Global Electricity Transition: Tracking the Shift from Fossil Fuels to Renewables (2000-2024)

A world map that morphs between two states. In choropleth mode, countries are colored on a yellow-to-green scale by renewable share of electricity — greener means greater energy transition. In cartogram mode, each country becomes a circle sized by GDP, so economic scale is obvious.

This design is inspired by the dorling cartogram (See example) and the energy use per person choropleth by OWID (See example). However this design is not a copy-and-paste solution. I incorporate my own creativity which would be discussed.

How Analysis

Marks:

• State A: Areas (2D): country polygon fills
• State B: Areas (2D): circles proportional to GDP
• Both states: Points (0D): icon symbols on hover (icons represent dominant energy source eg. 💧 for hydro)

Channels:

• Geographic position: country geometry (spatial). Preserved exactly in the choropleth; in the cartogram, circles drift to approximate positions which is close enough to keep geographic intuition and loose enough to let GDP drive the layout.
• Color saturation : renewables_share_elec (ordered quantitative, 0 - 100%). A yellow-to-green sequential scale that stays constant across both states. As a magnitude channel it satisfies expressiveness for ordered data.
• Area : gdp (ordered quantitative, cartogram only). This is the channel that makes Q1 answerable — a large green circle says "wealthy and green", a large yellow one says "wealthy but lagging."
• Shape (icon) : dominant energy source (categorical). An emoji icon appears on hover above each country — an identity channel for categorical data. It adds a quick "what powers this place?" layer without cluttering the default view.

Idioms applied:

• Choropleth Map: Geographic area marks with sequential color encoding. Chosen because Q1's question seeks to know if region predicts renewable adoption? The choropleth allows viewers to scan for regional clustering of green (high renewables) vs yellow (low renewables). A scatter plot of GDP vs renewable share was considered, but it loses the geographic clustering that helps answer whether region overrides wealth as a predictor.
• Dorling Cartogram: a cartogram variant where countries are circles with area proportional to a quantitative attribute (GDP). Chosen because Q1's other dimension is economic: does wealth predict adoption? GDP-proportional circles lets the viewer test wealth as a predictor directly. A second side-by-side choropleth colored by GDP was considered, but morphing in one view avoids the mental cost of matching countries across two separate maps.
• Tooltips: Detail-on-demand on hover, showing country name, renewable share, electricity generation, and dominant source.

Goals (Questions & Action/Target Pairs):

We address question one mainly with this visualization. Restating Question 1: Do countries with similar economic profiles have similar levels of renewable adoption, or do other factors override wealth as a predictor?

• {Compare, Similarity} (Q1): the GDP comparison overlay lets the user click two economically similar countries and see their GDP circles, alongside renewable share and dominant source.
• {Locate, Outliers} (Q1): In cartogram mode, a large circle (high GDP) that remains yellow (low renewable share) is an outlier. Also, a small circle that is deep green (high renewables despite low GDP) is the inverse outlier. The viewer can then switch to choropleth mode and check if countries in a specific region / area tend to have higher renewables which would signal geography as a predictor of adoption.
• {Discover, Correlation} (Q1): in cartogram mode the dual encoding (area = GDP, color = renewable share) lets the viewer scan the full set of bubbles to discover whether large economies tend to be greener or not.

Techniques / Methods (Design principles):

• Expressiveness: ordered data (renewable share, GDP) uses magnitude channels (color saturation, area); categorical data (dominant source) uses an identity channel (shape icon).
• Effectiveness: Area is relatively weak for comparing distant bubbles, so the comparison overlay brings two circles (countries) for a more direct comparison to compensate for the channel's limitation.
• Eyes beat memory: A morph between two states instead of side-by-side maps helps the viewer track each country through the transition rather than mentally matching across two separate views.

Further Discussion

• The design incorporates Gestalt principle of common fate: all shapes morph together, so the viewer perceives them as the same objects changing encoding rather than a new dataset.
• Also the GDP for 2023 and 2024 isn't available in the energy dataset so I decided to limit the year scrubber to 2000-2024 for this design.

Original and creative elements

• GDP comparison (cartogram mode): clicking two countries brings them to the center as concentric circles with GDP, renewable share, and dominant source shown side by side.
• Choropleth-to-cartogram morph: The original element. No standard idiom exists for this transition.
• Animated icon hover: Replaces text-only tooltips with a shape identity channel (pre-attentive). Works consistently across both states.

Commentary and Critique

How it answers Q1:

• In cartogram mode the dual encoding (area = GDP, color = renewable share) lets the viewer scan all bubbles to discover whether GDP correlates with renewable share — do larger economies tend to be greener? ({Discover, Correlation}).
• A large circle (high GDP) that stays yellow (low renewable share) is a country defying the GDP-transition relationship (an outlier). The inverse (a small deep-green circle) is equally revealing. This supports {Locate, Outliers} pair.
• The comparison overlay implements {Compare, Similarity} pair by letting the viewer click two economically similar countries and see their renewable adoption levels side by side, judging whether similar wealth produced similar adoption.
• Overall, the design reveals wealth is a weak predictor of renewable adoption. The conclusion section of the project talks about this in more depth.

What works:

• The choropleth is a familiar visual that requires no learning. The transition then presents countries GDP without requiring a new mental model, and the comparison overlay lets the user choose their own country pairs which makes conclusions feel self-discovered rather than prescribed.
• The comparison tool compensates for area being a weak channel. Instead of trying to measure them visually, the viewer sees them overlaid with explicit numbers.

Limitations and improvements:

• The GDP circle comparison is limited to only two countries. The client might want to compare three or more.
• Small economies produce tiny circles that are hard to click. Adding a pan and zoom would help.

Alternatives

• For the main design, I considered a side-by-side choropleth + cartogram, but that requires mentally matching countries across two maps.

This design presents a three-view coordinated dashboard consisting a of donut chart which acts as both a global overview of energy source generation and the primary controller for the coordinated views. The other two views respond to donut selections: a choropleth recolors to show that source's geographic distribution, and a ranked bar chart re-sorts to show the top 15 producers.

This design is inspired by Becker & Cleveland's (1987) coordinated views framework, the choropleth is inspired by OWID's energy explorer and the ranked bar chart builds on the bar chart race idiom.

However this design is not a dumb merge of these techniques. I extend this with my creativity which is discussed below.

How Analysis

Marks:

• Donut: Areas (2D): arc segments sized by global TWh
• Map: Areas (2D): country polygons; Points (0D) are hover icons
• Bars: Areas (2D): rectangular bar marks

Channels:

• Arc angle/area (donut): source global TWh (quantitative). Angle is weak for precise comparison, but the donut's job is overview and selection so rough proportions are enough.
• Color hue: source identity (categorical). Each source keeps its color across all views so the viewer always knows which source they're viewing.
• Color saturation (map fill): selected source share % (quantitative, sequential). The ramp changes hue with the source, so the map feels different for each selection.
• Geographic position (map): country location (spatial). Lets the viewer spot regional clustering — does solar concentrate in equatorial countries? Does hydro follow mountain ranges?
• Length on common scale (bars): source generation TWh (quantitative). The most effective magnitude channel, used when precise comparison matters most.
• Y-position (bars): rank by selected source (ordinal). Top producers are immediately visible without scanning.
• Shape (icon): dominant energy source (categorical). On hover, an emoji icon appears above the country — an identity channel that adds a "what actually powers this place?" layer without cluttering the default view.

Idioms applied:

• Donut Chart: arc segments sized by global TWh. Chosen so the viewer sees global share of energy sources and it also doubles as a selector. A simple dropdown was considered, but the donut also shows global proportions — the viewer learns the overall energy balance before they even start exploring.
• Choropleth Map: geographic area marks with sequential color encoding so that the viewer see geographic concentration at a glance. Small multiples (one choropleth per source) were considered, but with 7 sources the maps become too small to read. Coordination keeps each view full-size.
• Ranked Bar Chart: horizontal bars sorted by generation (TWh). Chosen because Q2 asks who dominates.
• Tooltips: detail-on-demand on hover, showing country name, source generation, and share. Aids lookup without cluttering the main views.

Goals (Questions & Action/Target Pairs):

We address question two mainly with this visualization. Restating Question 2: Is there a relationship between a country's geography and the type of energy it produces and does this determine which nations lead in each energy source?

• {Browse, Distribution} (Q2): selecting a source on the donut recolors the choropleth to show that source's geographic footprint.
• {Locate, Features} (Q2): the bar chart ranks the top 15 countries per source. Switching from coal to solar and watching the leaderboard reshuffle directly answers "do the same countries dominate, or does leadership differ by source?"

Techniques / Methods (Design principles):

• Expressiveness: ordered data (TWh, share %) uses magnitude channels (length, area, color saturation); categorical data (source identity) uses identity channels (color hue, shape icon).
• Effectiveness: the bar chart uses length on a common scale for the primary comparison task and the viewer doesn't have to do extra mental work to process this.
• Facet — Juxtapose (multiple views): the three views (donut, map, bar chart) are placed side by side so the viewer can see overview, geographic spread, and ranking at once. Selecting a source in one view updates the others so the viewer gets linked perspectives on the same data without having to switch tabs or remember what they saw.
• Eyes beat memory: because the views are juxtaposed rather than tabbed, the viewer compares them side by side instead of relying on memory.
• Responsiveness: The design is very responsive to selections and changes (in 0.1s) which aids perceptual processing.

Further Discussion

• The cross-view coordination follows Shneiderman's mantra (overview first, zoom and filter, details on demand): the donut gives overview, source selection filters all views, and tooltips provide detail.

Original and creative elements

• Donut as selector + visualization: standard dashboards use dropdowns. Here the selector is informative, showing globals proportions. The viewer learns the overall energy balance before they even start exploring.
• Sync /Unsync toggle: in synced mode, the donut drives both views. In unsynced mode, each view gets its own source dropdown, so the viewer can compare two sources side by side (e.g. coal on the map, solar on the bars).
• Bar Selection: Selecting a bar in the ranked-bar chart highlights it in the world map so the viewer can easily spot the country of interest.

Commentary and Critique

How it answers Q2:

• Clicking an energy source fills the map and reorders the bar chart. This helps to quickly view contrasts to help answer Q2 ({Browse, Distribution} ,{Locate, Features})
• The unsync toggle lets the viewer compare leading countries across two sources simultaneously. They can see the leader for coal in the map and the leader for solar in the bar chart.
• The visualization shows that no single country tops all sources which could signal that geography has an effect on which energy a nation develops. The final conclusion discusses this observation further.

What works:

• Coordination means every source switch yields insight across all three views thus the viewer doesn't need to manually configure the views.
• Consistent color hue across views means the viewer always knows which source they're looking at, even when switching rapidly.

Alternatives

• I considered tabbed views for the different chart types but that hides information. I also considered small choropleths to show all energy sources but the maps become very small and much meaning can't be derived without zooming.

• This design merges ideas from the bump charts and streamgraph to show both energy rank and absolute generation magnitude changes over the entire period (2000-2024).
• Each energy source is a flowing stream: vertical position encodes rank (1st = top) and stream width encodes TWh generation. Color hue encodes source identity.
• The chart builds left-to-right with temporal animation, and auto-annotated callouts appear at each crossing. Also a toggle switches stream width to share (%) instead of TWh, revealing whether rank changes correspond to share changes.

How Analysis

Marks:

• Areas (2D): each source is a continuous filled stream whose vertical center follows a rank-based path.
• Points (0D): auto-annotated crossing callouts marking overtake events

Channels:

• Y-position (stream center) : rank by TWh (ordinal). The most effective channel carries the most important encoding (rank crossings are immediately visible as streams swap vertical positions).
• X-position : year 2000 - 2024 (quantitative). Left-to-right matches the natural reading direction for time progression.
• Stream width : absolute generation TWh (quantitative). A secondary magnitude channel so rank and generation magnitude are visible at once.
• Color hue: source identity (categorical). Seven sources stay within the perceptual limit of color hues. The same colors are used from previous designs for consistency.

Idioms applied:

• Bump Chart: rank-based Y-position over time. It's chosen because Q3 asks whether renewables are displacing fossils which is seen by overtaking (crossing) in rank. The viewer is able to see the exact year a displacement happened. A stacked area chart was considered, but it buries rank changes inside layers so the viewer can't tell when solar overtakes oil without mentally subtracting.
• Streamgraph (area encoding): stream width encodes TWh, so the viewer can tell whether a rising source is replacing fossils or just growing alongside them. Plain bump lines (no width) were considered, but rank alone doesn't distinguish displacement from addition — a source can rise in rank while the one it overtook also grows in absolute terms.
• Tooltips: Shows exact TWh, share %, and rank for any source in any year on hover.

Goals (Questions & Action/Target Pairs):

We address question three mainly with this visualization. Restating Question 3: Is the global energy transition a displacement of fossil fuels or is it due to renewables being added on top of growing total demand?

• {Discover, Trend} (Q3): the stream paths reveal the 24-year trajectory of each source's rank. The viewer sees which sources are gaining ground and which are losing it.
• {Discover, Correlation} (Q3): crossings show whether fossil decline tracks with renewable rise. If solar's stream crosses above oil's at the same time oil narrows, that's displacement. If oil stays wide while solar simply grows above it, that's addition on top. The correlation (or lack of it) is visible in the geometry.

Techniques / Methods (Design principles):

• Expressiveness: ordered data (rank, TWh, year) uses magnitude channels (Y-position, width, X-position); categorical data (source identity) uses an identity channel (color hue). There's no channel/data mismatch.
• Effectiveness: the two highest-ranked channels ( position) carry the two most important encodings (rank and time). Stream width carries the secondary dimension (magnitude).
• Facet (Superimpose): All seven sources share the same view space rather than being stacked or separated. This is what makes crossings visible. In a stacked area chart these overtakes would be hidden inside the layers.

Further Discussion

• The left-to-right animated build follows a narrative arc in which the viewer watches the energy landscape evolve, anticipating crossings before they occur. This makes the visualization exploratory and engaging rather than static.

Original and creative elements

• Variable-width bump streams: Standard bump charts use lines with no width. This replaces lines with streams encoding TWh as a second quantitative dimension, combining what are normally two separate chart types.
• Streams that cross: In this design streams cross freely, making overtake moments of energy sources clearly visible not hidden.
• Data-driven callouts: Hovering over a stream shows the source, year, rank, tWH, and share percentage. This allows the viewer to access more information without cluttering the main view.

Commentary and Critique

How it answers Q3:

• The stream paths reveal which sources are rising, falling, or flat over 2000 - 2024 direclty answering the {Discover, Trend} pair.
• The crossing moments test whether fossil and renewable generation move inversely. If coal's stream narrows as renewables widen, that is displacement; if coal stays wide while renewables simply grow above it, that is addition on top. ({Discover, Correlation}).
• Overall, the transition is mostly addition, not displacement of fossils by renewables. The project conclusion explains this into detail.

What works:

• Overtake moments are pre-attentive. The viewer sees them without searching, unlike stacked area charts where rank changes are buried inside fixed layers.
• The design encodes two quantitative dimensions (rank + magnitude) simultaneously, which neither bump charts nor area charts alone can do. This dual encoding is what makes Q3 answerable because rank alone doesn't distinguish displacement from addition.
• All 24 years are visible at once, so the viewer reads trajectories directly rather than scrubbing a slider and reconstructing the trend from memory.

Limitations and improvements:

• The animated build requires the viewer to wait which is not ideal for quick lookup tasks. The static end-state partially mitigates this.

Alternatives

• To visualize the {Derive, Trend} pair, a diverging area chart plotting the derived fossil_renewable_balance over time would make the displacement-vs-addition answer readable in a single line rather than requiring the viewer to compare two streams.