| title | Process Book: What's in a Barrel? | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| subtitle | One barrel of crude, and the day that falls out of it. | ||||||||
| author | The Challenger team | ||||||||
| geometry | a4paper, margin=2cm | ||||||||
| fontsize | 10.5pt | ||||||||
| linestretch | 1.4 | ||||||||
| header-includes |
|
| Authors | Kamel Charaf (395501), Krish Chawla (357550) |
| Course | COM-480 Data Visualization, EPFL |
| Date | May 2026 |
| Live demo | https://challenger-com480.vercel.app |
A barrel of oil is 159 litres of crude that most people can't picture. The numbers, global demand, refinery yields, product fractions, are all publicly available, but they don't mean much on their own. Our goal was to connect them to something concrete: show how everyday objects (a coffee lid, a bus seat, a jacket, a road, a flight) all trace back to a single barrel.
We structured the site as a linear narrative in eight scenes, moving from the barrel itself to the world's consumption and a present-day demand forecast:
- Intro: the hook, one barrel and your whole day
- Extraction: where oil comes from
- Refinery: how the barrel splits into ten products
- Uses: where each cut goes, with a year-scrubbable Sankey
- Your Day: the main interaction, hover everyday objects to trace them back to the barrel
- Demand: live global consumption counter
- Crisis: three 2026 demand scenarios, forking from a shared history
- Recap: summary and free exploration
The site assumes no prior knowledge. Every figure links to a named source so the numbers can be checked.
{width=54%}
The structure. The eight scenes follow a dramatic arc (exposition, rising action, climax, falling action, resolution) which maps onto Freytag's pyramid with the "Your Day" scene at the peak. After the climax, the site opens up for free exploration.
{width=52%}
Four datasets back the project. Together they answer three questions: what a barrel becomes [1], where those products go [4], and how fast and how much the world burns [2][3]. The full list is in the references. The data caused more headaches than the visualization did, and most of the awkward cases ended up shaping a design choice.
The sources disagreed. "World oil demand, 2024" is 89 Mb/d in one source and 103 Mb/d in another. Neither is wrong: the Energy Institute counts narrow "oil" (refined products only) [2], while EIA STEO counts broad "petroleum + other liquids", adding NGLs, biofuels, and processing gain [3], a 13.7 Mb/d (~13 %) gap. We use both and always state which basis we're on: the live counter uses the broad series [3], the 60-year history uses the narrow one [2], which is the only series reaching back to 1965.
A barrel produces more than a barrel. The 2025 yields sum to ~106 % [1], not an error but processing gain: cracking heavy molecules into lighter ones adds volume, so 100 barrels in become ~105.9 out. This became the refinery scene's headline: "100 in becomes 105.9 out."
The growth trend surprised us. We expected plastics to dominate the shift; the data showed diesel [1]: petrochem feedstock fell (−1.6 pp) while distillate climbed +8.1 pp (21.9 % to 30.0 %) and gasoline held flat. That shift is now visible in the Route Sankey as you drag the year slider.
Below are the four scenes that changed the most, each shown sketch (left) and shipped (right).
Scene 1: from a barrel rotation to a pour. The M2 plan opened with an upright barrel that rotated 90° to become the refinery tower. We changed it to a pour instead: a rotation is just a visual transition, while a pour keeps the liquid connected to what the next scene shows, and you trigger it by scrolling.
{width=44%} 
{width=44%}
Scene 2: one tower split into two scenes. M2's Scene 2 was a single horizontal tower doing double duty, covering both "where oil comes from" and "what it splits into." One scene was carrying too much, so we split it. Extraction became its own scene; the refinery column became the next.
{width=44%} 
{width=44%}
Scene 4: Route absorbs the old Scene 6. The M2 plan had two separate scenes: a static Sankey (Route) showing where each cut goes, and a standalone animated trend stack (Scene 6) showing how the mix shifted over thirty years. Feedback during testing made it clear they told the same story twice. We merged them: Route became a year-scrubbable Sankey that carries both the routing and the historical shift, and the standalone trend scene was cut. The split earlier had added a scene; this merge removed one, so the final site still has eight scenes. Below: the cut trend sketch (left), folded into the shipped Route Sankey (right).
{width=44%} 
{width=44%}
Two plots merged into one: the standalone trend stack (left, old scene 06) and the static Route Sankey were combined into a single year-scrubbable Sankey (right, scene 04) that now carries both the routing and the 1993–2025 shift.
Scene 5: the climax got denser. The M2 climax had a 3×2 grid of six everyday objects. Six objects wasn't enough to make the "your whole day" point land. We expanded to sixteen; the interaction stayed the same.
{width=44%} 
{width=44%}
Concept sketches for the other four: 02) Lift, 06) Burn, 07) Fork, 08) Close.
{width=24%} 
{width=24%} 
{width=24%} 
{width=24%}
Colour. We dropped the teal accent from M2 and switched to a single amber, which is close to the colour of crude oil. It highlights exactly one thing per scene: the diesel cut, the user's selected country, the crisis fork. Everything else stays grey, so colour always means something specific rather than just filling space.
Scene titles as claims. We rewrote every scene title as an active claim the chart then backs up ("One barrel goes in. Ten products come out."), while the nav labels each scene by content (Intro, Extraction, Refinery, Uses, ...). We removed the per-scene footer bylines because they pulled attention away from the charts; the three facts that actually mattered to the narrative (the +5.9 % gain, the ribbon-thickness key, the pool/supertanker equivalence) were moved into the scene leads. Source attribution appears once in the global footer.
Typography. Three typefaces, each used for a specific purpose. Fraunces (high-contrast display serif) sets every title. Inter carries body copy, kept neutral so it doesn't compete with the charts. JetBrains Mono sets every number, so figures line up in columns and read as data: the 46 %, the 8.1 pp, the 1,205/s.
Country selector. We chose a manual country selector over geo-IP so users pick their own country, avoiding a network and privacy dependency that added nothing to the story.
Removing the scroll lock. Extraction originally locked scrolling until the user pumped the rod three times. The lock was removed and pumping the rod is now optional.
Encode quantity with position or length, never colour alone. Every quantitative scene follows this: the column and Sankey use length, the counter uses bars, the crisis uses line slope. Bars start at 0; categoricals are ordered by value or by boiling point, never alphabetically. The one deliberate exception is the crisis chart's truncated y-axis: monthly demand sits around 100 Mb/d so a full axis would flatten the divergence, but we annotate the true baseline and label the fork, so the truncation is disclosed.
Why each chart type.
- Refinery: height-encoded column, not a pie or table. Band height = share, so the tallest cut reads as biggest immediately, and the vertical axis also reflects how distillation works physically, lightest fractions at the top and heaviest at the bottom, which a pie chart can't show.
- Destinations: Sankey, not a stacked bar. The story is routing; a stacked bar hides which cut feeds which use. Ribbon width carries quantity, and scrubbing the year shows the mix shifting, which is why the standalone trend scene was redundant.
- Counter: live ticking number, not a static stat. It starts counting from when the page loads, so the figure reflects actual time spent on the page. A fixed "1,205 bbl/s" sitting on the page means nothing.
- Crisis: forking multi-line, not three delta bars. The message is divergence from one shared history. One line splitting into three shows it; isolated bars don't.
The climax interaction. Hovering any of the sixteen everyday objects draws a curved ribbon back to its band on the companion barrel tower; hovering a band highlights every object it feeds. All sixteen objects trace back to the same 159 litres; the thickest thread is gasoline at 46 %, which is why so many objects are travel-related. Technically, each ribbon is a d3-path cubic Bézier whose length is measured with getTotalLength() and revealed by animating stroke-dashoffset. It's the main interactive feature of the site.
Refinery declutter pass. An internal review found heavy cuts disappearing into the dark background under decorative animation. Changes made: lifted heavy-cut colours so they stand out; removed tray-lines, the animated feed-flow gradient, and flame/smoke effects (none carried data); replaced a loading-bar stagger with a single clip-path vapour sweep; moved hover feedback onto the slab; flattened the temperature axis so hue stopped doubling as a thermal scale; collapsed five tiny overlapping cuts into one labelled bracket, "+ 5 heavy cuts, hover each."
What we built. The whole site is vanilla JavaScript with D3 v7 and Scrollama, bundled by Vite and deployed on Vercel. A Python pipeline (pandas) turns raw datasets into a single figures.json at build time, so every number on the site is computed, never typed by hand. The full site ships at about 158 KB (53 KB gzipped).
References & data sources. Cited as [n] throughout.
- EIA, U.S. Refinery Yield (annual, 1993–2025). The barrel's composition. US-only: the shape generalises, the exact percentages don't; 16 raw products grouped into 12 boiling-point bands.
- Energy Institute Statistical Review, via Our World in Data (1965–2024). The 60-year consumption history. Narrow "oil" basis (~13 % below broad), reported in energy, not volume.
- EIA, Short-Term Energy Outlook (STEO), May 2026 (monthly to 2027). World demand and the 2026 forecast. Broad "petroleum + other liquids" basis (incl. NGLs, biofuels, processing gain); World series only.
- Hand-authored fraction-to-sector mapping, cited to IEA Oil 2024 and EIA AEO 2025. The routing behind the Sankey and the climax. A model, not a measurement: no public data exists at barrel granularity, so every row is cited.
- IEA Oil Market Report and OPEC Monthly Oil Market Report, May 2026. The crisis demand deltas (−420 / +190 / +1,200 kb/d), cross-checked against the IEF comparative analysis.
Every site-wide number is derived by notebooks/03_figures.py into figures.json, not typed by hand.
Tools. Vite + vanilla JS + D3 v7 + Scrollama; Python (pandas) pipeline; Fraunces / Inter / JetBrains Mono (self-hosted); Tabler-style icons; deployed on Vercel.
Contributions. A two-person project, split 50 / 50 across two complementary tracks.
#table(
columns: (auto, auto, 1fr),
inset: (x: 5pt, y: 4pt),
stroke: none,
align: top + left,
table.hline(stroke: 0.6pt),
table.header([*Member*], [*SCIPER*], [*Contributions*]),
table.hline(stroke: 0.4pt + luma(60%)),
[*Kamel Charaf*], [395501],
[*50 %: technical implementation & visualization.* The full web application: the Python data pipeline (EIA/STEO/OWID ingest, `01_explore`, `02_steo`, `03_figures` into `figures.json`); all eight D3 + Scrollama scenes. Helped with the ideation and other parts Krish focused on],
[*Krish Chawla*], [357550],
[*50 %: story, data analysis, screencast & process book.* Data analysis and research across the four datasets, including sourcing and citation; the two-minute screencast; and this process book. Helped with the data visualisation and tech implementation with Kamel],
table.hline(stroke: 0.6pt),
)