30:T946,# 🛢 Oil Spills Oil spills are a major concern all over the world. By most accounts, [nations are](https://www.statista.com/statistics/265203/global-oil-production-since-in-barrels-per-day/) [producing more oil](https://www.reuters.com/business/energy/us-oil-drilling-likely-accelerate-2022-kemp-2021-11-17/) [than ever before](https://www.eia.gov/outlooks/steo/report/global_oil.php). As such, they are refining, processing and transporting crude oil it at higher frequencies, and most likely higher volumes. 📈 Increase in oil production poses a clear and direct environmental challenge in the form of the unavoidable oil spillage that occurs in the process. The disastrous impact of oil spills on the environment is clear, and it is demonstrably long lasting: ["This is how oil spills damage our environment"](https://www.weforum.org/agenda/2021/10/oil-spill-environment-ocean/). 🧭 However, what is less clear is a clean oil spill tracker that we can use to monitor on-going spills. And perhaps more importantly: trend analysis based on such data to assess what to expect in the future. For instance, it might be worth knowing if oil companies have gotten better at preventing oil spills. Or (how) did the on-going COVID-19 pandemic years dented or spiked the number of oil spills? 💽 The best tracking dataset that I found for oil spills was this table on Wikipedia: [List of oil spills: https://en.wikipedia.org/wiki/List_of_oil_spills](https://en.wikipedia.org/wiki/List_of_oil_spills). But wikis are rarely amenable to data analysis. So, to make ends meet I figured that I will dig into the powers of Observable and started with this tutorial: [Working with Wikipedia Data](https://observablehq.com/@mbostock/working-with-wikipedia-data). After 12 hours of tinkering, I was able to put together the first draft of this page. 🥅 Overall, the goals with this page are 3-fold: 1. Take an active role in tracking oil-spills, instead of listening to fleeting news stories about them. 2. Learn more about story-telling with reactive streams of data [[a](https://uomresearchit.github.io/RSE18-shiny-workshop/goingfurther/reactive/),[b](https://en.wikipedia.org/wiki/Reactive_programming),[c](https://observablehq.com/@observablehq/introduction-to-data)] -- ObservableHQ being just one of them. 3. Building a set of data-analyses on top of the oil-spill data.31:T535,## 💽 Fetching Raw Data from Wikipedia The primary source of data for the analysis of this page is the table found at: [List of oil spills: https://en.wikipedia.org/wiki/List_of_oil_spills](https://en.wikipedia.org/wiki/List_of_oil_spills). *Disclaimers:* 1. The Wikipedia page clearly states that the list of oil spills is incomplete. Even if it were, oil spills are complex by nature and their magnitude can often not be measured correctly or accurately. This analysis front-loads those caveats so that any conclusions drawn from this dataset are done so with a grain of salt. 2. Where possible, I will try to highlight conclusions that will likely stand irrespective of these caveats -- and i will reason why that is so. In the absence of such reasoning, it is fair to assume that any conclusions that i personally make on this page, is nothing but hot air. 3. Further, anytime I find new information about an oil spill, I may contribute it back to the wikipedia page above. As such, while most of this data was collected by independent contributors, as of Dec 25, 2021 I have personal involvement in collecting bits of this dataset. 4. I have for the most part disabled the live-reload/fetch of the data from Wikipedia to: (a) not hit Wikipedia's servers/CDN on every reload, and (b) to make this data page self-sufficient.32:T537,spills = Array.from(rows, r => { const location = r.querySelector("td:nth-child(2)").textContent.trim(); const country = location.split(",")[0]; const dateString = r.querySelector("td:nth-child(3)").textContent.trim().split("–")[0] return { "Spill": r.querySelector("td:nth-child(1)").textContent.trim(), "Location": location, "Country": country, "Min Tonnes": parseFloat(r.querySelector("td:nth-child(4)").textContent.trim().replace(",", "")), "Max Tonnes": parseFloat(r.querySelector("td:nth-child(5)").textContent.trim().replace(",", "")), "Date": new Date(dateString), "Owner": r.querySelector("td:nth-child(6)").textContent.trim(), }}) .filter((element, index) => { let maxSpill = element["Max Tonnes"]; let minSpill = element["Min Tonnes"]; let isValid = e=> !isNaN(e); let isValidDate = e => e != "Invalid Date"; return isValid(maxSpill) && isValid(minSpill) && isValidDate(element["Date"]); })33:T533,Plot.plot({ width: 1500, rotate: 45, marginBottom: 45, marginTop: 45, marginRight: 10, caption: html`Number of Oil Spills, every year since ... dating back to 1903`, x: { ticks: 0, tickRotate: 65, tickSize: 2, label: "Years →", }, y: { grid: true }, marks: [ Plot.barY(spillsPerYear, {x: "Year", y: "Oil Spill Counts", fill: "#bab0ab" }), Plot.text(spillsPerYear, { x: "Year", y: "Oil Spill Counts", filter: (d) => (d["Oil Spill Counts"] > 0) && (d["Year"] % 10 === 0 || d["Oil Spill Counts"] === 10 || [2001,1907, 1903, 1937, 1958, 1968, 1971, 1984, 1991, 1996, 2007, 2013, 2021].indexOf(d.Year) !== -1), text: "Year", textAnchor: "middle", dx: 0, dy: -20 }), Plot.text(spillsPerYear, { x: "Year", y: "Oil Spill Counts", filter: (d) => (d["Oil Spill Counts"] > 0) && (d["Year"] % 10 === 0 || d["Oil Spill Counts"] === 10 || [2001,1907, 1903, 1937, 1958, 1968, 1971, 1984, 1991, 1996, 2007, 2013, 2021].indexOf(d.Year) !== -1), text: "Oil Spill Counts", textAnchor: "middle", dx: 0, dy: -5, style: { color: "white" } }) ] })34:T498,spillVolumePerYear = { var result = []; let cummulativeSpill = 0; for (let year = minYear; year <= spillYears[spillYears.length - 1]; year += 1) { let spillsForYear = searchSpill.filter(d => year === (d.Date.getYear() + 1900)) let netSpillForYear = 0; if (spillsForYear.length > 1) { netSpillForYear = spillsForYear.reduce((accumulator, currentValue, index, array) => { return accumulator + currentValue["Max Tonnes"]; }, 0) } else if (spillsForYear.length === 1) { netSpillForYear = spillsForYear[0]["Max Tonnes"]; } // else netSpillForYear remains 0. cummulativeSpill += netSpillForYear; result.push({ "Year": year, "Oil Spill Volume": netSpillForYear, "Cummulative Spill": cummulativeSpill, "Counts": spillsForYear.length, // "isSpike": false }) } for (let idx = 1; idx < result.length - 1; ++idx) { let curr = result[idx]["Oil Spill Volume"]; let prev = result[idx - 1]["Oil Spill Volume"]; let next = result[idx + 1]["Oil Spill Volume"]; result[idx]["isSpike"] = curr > prev && curr > next; } return result; }35:T46a,Plot.plot({ marginLeft: 70, width: 1200, height: 750, caption: html`Tonnes of Oil Spilt:
(a) Year-over-Year (see black line-plot); and (b) Cumulatively (see light brown area plot)`, y: { label: "Oil Spill Volume (in Tonnes)", grid: true, reverse: true }, x: { tickFormat: d => d.toLocaleString(undefined, {useGrouping: false}) }, marks: [ Plot.areaY(spillVolumePerYear, { x: "Year", y: "Cummulative Spill", curve: "catmull-rom", fill: "#bab0ab55" }), Plot.line(spillVolumePerYear, {x: "Year", y: "Oil Spill Volume", curve: "catmull-rom"}), Plot.text(spillVolumePerYear, { x: "Year", y: "Oil Spill Volume", text: (d) => d["Oil Spill Volume"].toLocaleString(undefined, {notation: "compact"}), dy: 10, filter: (d) => d["isSpike"] }), Plot.text(spillVolumePerYear, { x: "Year", y: "Cummulative Spill", text: (d) => d["Cummulative Spill"].toLocaleString(undefined, {notation: "compact"}), dy: 10, filter: (d) => d["isSpike"] && d["Year"] >= 1970 }) ] })36:[{"id":"08ebff5508fd2a5fff616db0f0568db6799735fd454fc2f05ae16f92d97b38d7ef9165a6c09b6fd1e76762b1a2a8be0dda4b3110fe75d0b9da8ce0e8755aafc2","href":"https://static.observableusercontent.com/files/08ebff5508fd2a5fff616db0f0568db6799735fd454fc2f05ae16f92d97b38d7ef9165a6c09b6fd1e76762b1a2a8be0dda4b3110fe75d0b9da8ce0e8755aafc2","name":"wikiFetchResult@2.json","type":"application/json","lastModified":1640478150445.276,"size":739164}] 2e:{"title":"🛢 Oil Spills","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":803,"value":"toc({selector: \"h2,h3,h4,h5\", heading: \"🗂 The rest of the page is organized as follows:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"// Commenting the live fetch out so that we do not hit Wikipideia's servers on page reloads.\n// wikiFetchResult = fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_oil_spills§ion=1`).then(response => response.json())\nwikiFetchResult = FileAttachment(\"wikiFetchResult@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"table = {\n const parser = new DOMParser();\n const external = parser.parseFromString(wikiFetchResult.parse.text[\"*\"], \"text/html\");\n const table = document.adoptNode(external.querySelector(\"table.wikitable\"));\n table.style = `\n display: block;\n position: relative;\n max-width: none;\n max-height: 300px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n `;\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"rows = table.querySelectorAll(\"tr:not(:first-child)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"**Data Cleaning: Unknown and Empty Tonnes**. \nGetting rid of entries with unknowns and empty strings for Min and Max Tonnes.\nAnd we are left with about 222 spills that we can analyze neatly.","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"**Largest and Smallest Oil Spills Since 1903**","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"largestSpillEver = spills.sort((a,b) => b[\"Max Tonnes\"] - a[\"Max Tonnes\"])[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"smallestSpillEver = spills.sort((a,b) => a[\"Max Tonnes\"] - b[\"Max Tonnes\"])[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"## 🧾 Tabulation of Oil Spills since 1903\n(data filtered for unknown/invalid values for max/min tonnes, and dates)","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"viewof searchSpill = Inputs.search(\n spills, {\n placeholder: \"Search oil spills\",\n datalist: [\"India\", \"Exxon\", \"BP\", \"California\", \"2020\", \"Australia\", \"Chevron\"],\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"Inputs.table(searchSpill, {columns: [\"Spill\", \"Location\", \"Country\", \"Min Tonnes\", \"Max Tonnes\", \"Date\", \"Owner\" ]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"largestSpill = searchSpill.sort((a,b) => b[\"Max Tonnes\"] - a[\"Max Tonnes\"])[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"smallestSpill = searchSpill.sort((a,b) => a[\"Max Tonnes\"] - b[\"Max Tonnes\"])[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"viewof maxMaxSpill = Inputs.range([0, largestSpill[\"Max Tonnes\"]], { \n value: largestSpill[\"Max Tonnes\"], \n step: 1, \n label: \"Max Spill\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"Plot.plot({\n marginLeft: 60.0,\n width: 1200,\n height: 750,\n style: {\n background: \"#F9F7EC\",\n color: \"#784D4D\", \n },\n x: {\n label: \"Year →\",\n grid: true,\n },\n y: {\n label: \"↑ (Max) Oil Spilt (in Tonnes)\"\n },\n marks: [\n Plot.dot(searchSpill.filter(d => d[\"Max Tonnes\"] <= maxMaxSpill), {\n x: d => d[\"Date\"], \n y: d => d[\"Max Tonnes\"], \n title: d => `${d[\"Spill\"]} // ${d[\"Max Tonnes\"]} tonnes`,\n fill: \"#4A3F08\",\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"**Notice how the number of spills and the size of the spills really start to increase as we approach the 1980's?** \nTake a look at the Year-wise bar plot below to drive this point home, to greater effect.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"## ⏰ Oil Spills By Year","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"spillYears = Array.from(new Set(searchSpill.map(d => 1900 + d.Date.getYear()))).sort();","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof minYear = Inputs.range([spillYears[0], spillYears[spillYears.length - 1]], {value: 1903, step: 1, label: \"First Year\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"spillsPerYear = {\n const result = [];\n for (let year = minYear; year <= spillYears[spillYears.length - 1]; year += 1) {\n const count = searchSpill.filter(d => year === (d.Date.getYear() + 1900)).length\n result.push({ \"Year\": year, \"Oil Spill Counts\": count }) \n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"**2020 witnessed 7 recorded oil spills from around the world.** Even the COVID-19 pandemic could not contain the number of spills the world got to see, suggesting that we are potentially seeing a greater volume of oil drilling and transport.","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"## 🛢 Volume of Spilt Oil","pinned":false,"hidden":false,"mode":"md"},{"id":657,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"## 🌍 Oil Spills by Country Impacted ","pinned":false,"hidden":false,"mode":"md"},{"id":533,"value":"spillCountries = Array.from(new Set(searchSpill.map(d => d.Country))).filter(d => d !== \"\").sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"spillsPerCountry = {\n let result = [];\n for (let index = 0; index < spillCountries.length; ++index) {\n const country = spillCountries[index];\n const count = searchSpill.filter(d => country === d.Country).length;\n result.push({ \"Country\": country, \"Oil Spill Counts\": count })\n }\n\n result = result.sort((a, b) => b[\"Oil Spill Counts\"] - a[\"Oil Spill Counts\"]);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"Plot.plot({\n width: 600,\n marginLeft: 110,\n style: {\n background: \"#F9F7EC\",\n color: \"#784D4D\", \n },\n y: {\n label: \"Country (or Location)\"\n },\n marks: [\n Plot.barX(spillsPerCountry, {\n y: \"Country\", \n x: \"Oil Spill Counts\",\n sort: {y: \"x\", reverse: true}\n }),\n Plot.text(spillsPerCountry, {\n y: \"Country\", \n x: \"Oil Spill Counts\",\n sort: {y: \"x\", reverse: true},\n dx: 7,\n text: \"Oil Spill Counts\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"## 🏢 Oil Spills by Owner","pinned":true,"hidden":false,"mode":"md"},{"id":595,"value":"spillOwners = Array.from(new Set(searchSpill.map(d => d.Owner))).filter(d => d !== \"\").sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"spillsPerOwner = {\n let result = [];\n for (let index = 0; index < spillOwners.length; ++index) {\n const owner = spillOwners[index];\n const count = searchSpill.filter(d => owner === d.Owner).length;\n result.push({ \"Owner\": owner, \"Oil Spill Counts\": count })\n }\n\n result = result.sort((a, b) => b[\"Oil Spill Counts\"] - a[\"Oil Spill Counts\"]);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"Plot.plot({\n width: 300,\n marginLeft: 250,\n style: {\n background: \"#F9F7EC\",\n color: \"#784D4D\", \n },\n y: {\n \n },\n marks: [\n Plot.barX(spillsPerOwner, {x: \"Oil Spill Counts\", y: \"Owner\", sort: {y: \"x\", reverse: true}}),\n Plot.text(spillsPerOwner, {\n y: \"Owner\", \n x: \"Oil Spill Counts\",\n sort: {y: \"x\", reverse: true},\n dx: 7,\n text: \"Oil Spill Counts\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"-----\n**Imports**","pinned":false,"hidden":false,"mode":"md"},{"id":814,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}