Abstract
        Against the backdrop of the climate crisis and energy transition, data visualisation serves as a vital bridge for public comprehension of complex issues. This project analyses the chart ‘Share of Petroleum Products in the Energy Mix of EU Countries in 2023’ (Shedding light on energy in Europe – 2025 edition - Interactive publications - Eurostat) published by Eurostat. We identified that this chart, intended to convey vital policy information, suffers from visual clutter, excessive cognitive load, and unclear narrative. By systematically applying graphic integrity principles and data storytelling methodologies, we first precisely replicated the original chart. Subsequently, we proposed and implemented a fundamental improvement: replacing the scatter plot with a combined view of a choropleth map and an ordered bar chart. The enhanced visualisation not only resolved technical issues such as overlapping labels and weak colour contrast, but more significantly constructed a dual-layer narrative spanning geographical patterns to precise rankings. This substantially reduced cognitive load, making the uneven distribution of Europe's energy transition immediately apparent. This project demonstrates that adhering to visualisation design principles can transform silent data into a powerful tool for public discourse.

1. Reasons for selection：

Our decision is based on three levels of consideration, which collectively point to one core conclusion: this diagram must be improved.

（1）The urgency of the issue and its public value

The core metric of this chart—the proportion of petroleum products in energy consumption—serves as a crucial barometer for gauging a nation's energy mix, carbon intensity, and transition progress. Against the backdrop of Europe's strategic drive towards the Green Deal and energy autonomy, this data directly informs climate policy evaluations, investment decisions, and public perception. Yet, such vital matters demand clear articulation. A chart that is difficult to read inadvertently raises the threshold for public engagement in discussions and may even lead to misunderstandings. We have a responsibility to ensure such vital data is better understood.

（2）As a classic example of a cautionary tale

The original chart originates from Eurostat, an authoritative body, and exemplifies the common style of public sector data releases. It epitomises many typical design pitfalls we encountered in the course:

• Inappropriate choice of chart type (using a scatter plot to represent unordered categorical data)
• Neglect of cognitive load (excessive, unstructured visual elements)
• Violation of Tufte's principle of data-ink ratio (redundant graphics and overlapping labels)

Analysing and refining such a representative diagram holds far greater value than merely correcting a random “poor diagram”. It provides an excellent practical testing ground for the theories we have learnt.

（3）Personal emotional resonance: a thoroughly disheartening reading experience

As students concerned with environmental issues, they initially sought answers from this chart: Where does my hometown stand in the transition? How is Europe progressing overall? Yet the reading process proved frustrating. The eye struggled to jump between dense clusters of dots and overlapping abbreviations, unable to form a quick overall impression. This cognitive friction caused by design flaws is precisely the core problem information visualisation aims to solve. We chose it because we have personally experienced how poor visualisation hinders understanding, and we are determined to change it.

2. Visual Storytelling: An Experiment in Failed Communication

2.1 The narrative world it seeks to construct

This scatter plot is not a haphazard sketch. As part of an official Eurostat publication, it serves a distinct interpretative visualisation purpose. The narrative it seeks to construct encompasses several layers:

1. Core Thesis: ‘Europe's energy transition progresses at varying paces across Member States.’
2. Narrative Objective: To quantitatively demonstrate this ‘disparity’ to policy researchers, media, and the public, providing a benchmark for assessing national performance and overall EU progress.
3. Expected Reader Mental Model: Readers should be able to swiftly accomplish several tasks via this chart: locate specific countries, compare values across 2-3 nations, and perceive approximate numerical ranges (e.g., 20-40%, 60-80%).

Essentially, it aspires to serve as an impartial data display board, a “dashboard” for consultation and comparison.

2.2 A Deep Dive into Narrative Structure: Why Scatter Plots Are the “Wrong Protagonists”?

Chart types constitute the “style” of narrative. The original selection of a scatter plot represents a fundamental strategic error.

• The Narrative Grammar of Scatter Plots: Standard scatter plots tell stories of “association” or “distribution”. For instance: “What is the association between per capita GDP and life expectancy?” (association story), or “How do these data points cluster in two-dimensional space?” (distribution story). Both the X and Y axes typically represent continuous, ordered numerical variables.
• Narrative Conflict in the Original Chart: Here, the X-axis is forcibly populated with ‘country codes’ – a non-sequential categorical variable. Attributing comparative meaning to the relative positions of “AT” (Austria) and ‘BE’ (Belgium) on the X-axis is arbitrary. This is akin to narrating the lives of unrelated individuals using a single timeline, severing the intrinsic logical chain of the narrative.
• Cognitive consequences: Without a meaningful X-axis sequence, readers lose horizontal visual guidance. They are forced into an inefficient ‘scan-compare’ pattern: locating a point on the Y-axis, memorising its height, then searching the cluttered X-axis area for another point to compare heights. This process demands substantial working memory to temporarily store and contrast information, readily leading to fatigue and errors. It fundamentally contradicts the principle of ‘making visualisation simple and swift’—the audience should not expend a single extra second on self-analysis.

2.3 A disaster in characterisation: all actors wearing identical costumes

In a good story, character design should serve the narrative. In the original illustration, the “characters” represent various nations.

• Flat character design: Aside from the “EU” character being distinguished by a deep blue costume and larger stature, all other national characters (from Sweden to Malta) wear identical light blue costumes. There is no distinction between protagonists, supporting roles, or antagonists. Visually, Norway (transition pioneer) and Malta (heavily dependent) are treated equally.
• Complete disregard for the ‘magic number 7±2’: Cognitive psychology indicates that human short-term memory has a finite capacity for processing information in “chunks”. The original image thrusts over 30 ‘characters’ equally into the foreground at once, far exceeding the audience's instantaneous cognitive capacity. Viewers cannot swiftly identify key figures (such as outliers or cluster representatives), resulting in a blurred narrative focus and diminished story tension.
• Failed “highlighting” attempt: Whilst attempting to highlight the EU with colour, this highlighting remains isolated. It fails to establish meaningful visual contrast hierarchies with other elements. An effective contrast system should guide the audience: for instance, using colour to distinguish “high, medium, low” dependency groups, or employing shapes to mark narrative-rich groupings like “islands” or “Nordic nations”.

2.4 Stage Design and Visual Noise: Placing the Audience in a Fog

The visual “stage” constitutes the interface formed by all non-data elements such as axes, grids, and labels.

• Redundant “data ink” and graphical ducks: The extensive areas of pale blue dots in the chart serve primarily as physical containers for text labels. They themselves do not encode data variation (except for the EU), constituting classic redundant data ink. Such graphical elements existing for ornamentation alone approach Edward Tufte's critique of “graphical ducks” – where form overpowers function.
• Label Overlap: Narrative Lines Obstructing Each Other: This constitutes the most critical stage accident. When multiple characters' ‘lines’ (country codes) overlap (such as ‘MT’, “CY”, and ‘LU’ crowding together near 80%), crucial information becomes entirely obscured. This violates the golden rule of information design: information pathways must remain unobstructed. Viewers are forced to guess or abandon comprehension, thereby disrupting the narrative flow.
• Chaotic spatial layout (side effect of ‘jittering’): To resolve label overlap, the original chart employed a non-standard ‘jittering’ algorithm, causing data points to shift randomly along the X-axis. While mitigating label masking, this further disrupted the X-axis's residual semblance of order, rendering the already meaningless horizontal arrangement more random and chaotic, amplifying visual instability.
• Sacrificing the most potent narrative stage—geospatial context: Energy consumption, resource endowment, and climate policies all exhibit pronounced regional characteristics. Abandoning the map equates to forfeiting the ultimate stage capable of instantly activating viewers' prior knowledge (procedural knowledge). Audiences cannot naturally pose and answer questions such as: ‘Do Nordic nations collectively perform better?’ or ‘Do Mediterranean island states face unique challenges?’ The original design forces viewers to comprehend data in a vacuum, imposing unnecessary cognitive abstraction. Do Mediterranean island nations face unique challenges?" The original chart forces viewers to interpret data in a vacuum, imposing unnecessary cognitive abstraction.

2.5 Summary: A story that went badly wrong

The visual narrative of the original image represents a comprehensive failure from strategy to tactics:

• Strategically, it erred in its narrative form (a scatter plot), incapable of conveying a story of ‘comparison and ranking’.
• In terms of characterisation, it failed to establish actors with distinct roles and traits, causing all characters to vanish into the background.
• On stage, it created immense visual noise and cognitive dissonance through redundant ornamentation, conflicting dialogue, and chaotic layout.

Ultimately, it transformed the crucial narrative of ‘Europe's uneven energy transition’ – which should have been clear and compelling – into a puzzle requiring audiences to exert considerable effort to decipher. The inherent value of the data was severely diminished by this poor storytelling.

3. Reproduction: Faithful recreation, mirroring the original

To conduct a rigorous and verifiable comparative analysis, our first step was to precisely reproduce the original image. Using Python's Plotly library, we strictly followed these steps to ensure our ‘replica’ was a faithful mirror image of the original:

• Data cleansing and computation: Accurately extract the ‘petroleum products’ and ‘total energy’ data from the provided dataset.csv, and rigorously calculate the percentages.
• 1:1 reproduction of visual encoding:
  • Colour: Precisely matches the original image's light blue (rgba(207,219,255,0.95)) and dark blue (rgba(0,32,96,1.0)).
  • Size: Differentiates between the size of dots for the European Union and other countries.

The text is replicated exactly in terms of font, colour and centred alignment for the country code.

• Simulated “jitter” algorithm: To replicate the original image's ad hoc approach to label crowding, we implemented logic whereby when two data points' Y-values are excessively close, a minute positional offset is applied along the X-axis. This demonstrates the arbitrary nature of the original layout.

• Enhancing basic interactivity: We have introduced hover tooltips displaying full country names and precise percentages. This measure is not intended as an improvement, but rather to enable verification of data accuracy during our own analytical processes.

Through replication, we have not only established a benchmark for critical analysis but also personally experienced every frustration the original design imposed upon readers—clutter, confusion, inefficiency. This “mirror” has laid bare all the issues with stark clarity.

4. Improvement: Restructure the narrative to let the data speak for itself.

Our improvements are not mere cosmetic enhancements, but rather a narrative restructuring grounded in pedagogical principles. We have abandoned the fundamentally flawed scatter plot and devised a dual-layered narrative structure, clearly dividing the story into two distinct chapters.

4.1 Improvement Plan: From Single-Act Chaos to Two-Act Clarity

Chapter One: Geographical Patterns (Hierarchical Statistical Maps)

• Action: We have introduced a map of Europe, using a continuous colour gradient to encode oil dependency (employing the YlOrRd colour scheme: yellow denotes low, orange denotes medium, red denotes high).
• Why such an improvement?
  1. Aligning with cognitive and procedural knowledge: The human brain is inherently adept at processing spatial information. Maps instantly provide the context of ‘where the story unfolds,’ enabling readers to rapidly grasp regional patterns using their innate procedural knowledge, significantly reducing cognitive load.
  2. Revealing hidden patterns: Upon presentation, a clear north-south gradient emerges—Northern European countries predominantly appear light in colour (low dependency), while Southern/Southeastern European nations are darker (high dependency). This core insight, entirely obscured in the original chart, now becomes self-evident. It answers the crucial question: ‘Is there a geographical pattern?’
  3. Efficient visual encoding: Directly encoding primary data using colour—a potent visual variable—replaces the original chart's meaningless pale blue dots, maximising data-to-ink ratio.

Chapter 2: Precise Ranking and Comparison (Ordered Bar Charts)

• Action: We have added a bar chart sorted in descending order by oil dependency, with bar colours matching the map's colour scale.
• Why such an improvement?
  1. Providing the most accurate comparative channel: The course indicates that comparisons based on length/position yield the most precise visual judgements. Bar charts transform the ambiguous “relative height of points” into precise “length of bars”, making differences and rankings between countries immediately apparent.
  2. Highlighting key players in the narrative: Ranking naturally elevates top and bottom performers to centre stage (e.g., Malta >80%, Sweden <30%), perfectly resolving the original chart's ‘character overload’ issue.
  3. Eliminating label overlap entirely: Country names are positioned alongside bars with ample space, ensuring zero overlap. This completely removes the original chart's primary visual clutter and external cognitive load source.
  4. Establish visual connections: Bar colours synchronise with map colours, enabling readers to effortlessly switch between views and integrate information.

4.2 Improved Effectiveness Assessment: A Complete Transformation

The enhanced visualisation represents a qualitative leap from “data dumps” to “data stories”:

dimension	Original graph (scatter plot)	Improved (map + bar chart)	The course principles applied
Narrative clarity	Chaos, illogical flow	A clear dual-layer narrative: first examine the broader context (where), then delve into the specifics (who, how many).	Storytelling Format (OCAR), Small Multiples
cognitive load	Extremely high (visual search, memory load)	Significantly reduced (pattern recognition, precise comparison)	Cognitive Load Theory, Working Memory
Core Insights Presentation	concealed amidst the clutter	The north-south geographical gradient and precise national rankings are clearly evident on paper.	Visual variables, data ink ratio
Technical issues	Labels are severely overlapping, and the colours are meaningless.	Labels are clearly marked, with colours effectively encoding data.	Practical Guide (Labels, Colours, Sorting)
Emotional engagement and participation	Causing frustration and confusion	Arouse curiosity (‘Why does this pattern exist?’) and foster clear understanding	Incorporating emotional elements (curiosity, surprise)