31:T444,This notebook contains the prototyping process for ideating the interactive chart that explores the share of crude oil reserves that are viable given any breakeven oil price. It´s part of an article written in ‘Off the Charts’ newsletter from @ECONdailycharts, where I´ve written about how we create prototypes for our interactive projects at @TheEconomist. The article is available [here](https://view.e.economist.com/?qs=06c048ddf305becb44562995e5626bf038498571262c7e4f62cd506f9e1614525bb1a6cc428d93e738d69fdea8477d6f392033cae3a22c7cb09ebb1097dd556a4eb21860ac989834aebd04f1017cada6). The final interactive is in this [article](https://www.economist.com/interactive/briefing/2022/09/24/war-in-ukraine-has-reshaped-worlds-fuel-markets), on how the war in Ukraine has reshaped the world’s fuel markets. War and sanctions have rammed a tank cannon into the fine-tuned mechanics of the global energy trade. A great reshuffle is under way so the share of profitability (percent of reserves a country can profitably extract) will differ a lot based on the breakeven price of oil price.32:Tfae,chartM = { let marginM = 100; let availableWidthM = width - marginM * 2; const svg = d3.create("svg").attr("viewBox", [0, 0, width, 400]); const g = svg .append("g") .style("font", "12px sans-serif") .attr("transform", `translate(${marginM},${0})`); // set texture for profitable / non profitable ranges svg.call(textureOPEC); svg.call(textureNONOPEC); // gridlines at specific % [0.25, 0.5, 0.75, 1].forEach((d) => { g.append("text") .attr("x", -marginM) .attr("y", baselineYM - 5 - barHeightM * d) .text(d * 100 + "%"); g.append("text") .attr("x", -marginM) .attr("y", baselineYM - 5 + barHeightM * d) .text(d * 100 + "%"); g.append("line") .attr("x1", -marginM) .attr("x2", availableWidthM + marginM) .attr("y1", baselineYM - barHeightM * d) .attr("y2", baselineYM - barHeightM * d) .attr("stroke", "#d0d0d0") .attr("stroke-width", 1); g.append("line") .attr("x1", -marginM) .attr("x2", availableWidthM + marginM) .attr("y1", baselineYM + barHeightM * d) .attr("y2", baselineYM + barHeightM * d) .attr("stroke", "#d0d0d0") .attr("stroke-width", 1); }); // baseline g.append("line") .attr("x1", -marginM) .attr("x2", availableWidthM + marginM * 2) .attr("y1", baselineYM) .attr("y2", baselineYM) .attr("stroke", "#222222") .attr("stroke-width", 2); // function reactive to Input controls, update the whole chart function update(price, data, sortByProfitability) { let total = d3.sum(data, (d) => d.total); let accX = 0; let fillFunc = (o) => o["OPEC NON-OPEC"] === "OPEC" ? "#1192e8" : "#9f1853"; let fillFuncTexture = (o) => o["OPEC NON-OPEC"] === "OPEC" ? textureOPEC.url() : textureNONOPEC.url(); if (!_.isEmpty(sortByProfitability)) data = _.sortBy(data, ["profitableHeight"]).reverse(); // add size bar attributes (width, height and position) on each country data.forEach((row) => { row.barWidth = availableWidthM * (row.total / total); row.profitableHeight = barHeightM * row.profitableShare; row.nonProfitableHeight = barHeightM * (1 - row.profitableShare); row.accX = accX; accX += row.barWidth; }); // draw share of profitable reserves g.selectAll("rect.profitable") .data(data, (d) => d.Country + "-profitable") .join("rect") .attr("class", "profitable") .attr("stroke", "whitesmoke") .attr("fill", fillFunc) .attr("width", (d) => d.barWidth) .transition() .duration(250) .attr("x", (d) => d.accX) .attr("y", (d) => baselineYM - d.profitableHeight) .attr("height", (d) => d.profitableHeight); g.selectAll("text.profitable") .data(data, (d) => d.Country) .join("text") .attr("class", "profitable") .style("text-anchor", "middle") .style( "text-shadow", "1px 1px 0 #ddd, 1px -1px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5), -1px -1px 0 rgba(255, 255, 255, 0.5)" ) .text((d) => _.has(country_name_to_id, d.Country) ? _.get(country_name_to_id, d.Country) : "" ) .transition() .duration(250) .attr( "transform", (d) => `translate(${d.accX + d.barWidth / 2},${ baselineYM - d.profitableHeight - 5 }) rotate(0) ` ); // draw share of non profitable reserves g.selectAll("rect.nonprofitable") .data(data, (d) => d.Country + "-nonprofitable") .join("rect") .attr("class", "nonprofitable") .attr("stroke", "whitesmoke") .attr("fill", fillFuncTexture) .attr("fill-opacity", 0.6) .attr("width", (d) => d.barWidth) .transition() .attr("x", (d) => d.accX) .duration(250) .attr("y", baselineYM) .attr("height", (d) => d.nonProfitableHeight); } return Object.assign(svg.node(), { update }); }33:Tbe9,viewof chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // get top N countries let countries = Array.from( oilOPEC === "OPEC" ? oilPricesTableOPEC.values("Country") : oilPricesTableNonOPEC.values("Country") ).slice(0, 12); let oilPricesOPEC = oilPrices.filter((d) => countries.includes(d.Country)); // build grid to allocate countries let cols = 4; // build grid of cells const cell = svg .append("g") .attr("transform", "translate(50, 0)") .style("font", "12px sans-serif") .selectAll("g") .data(countries) .join("g") .attr( "transform", (d, i) => `translate(${(i % cols) * cellWidth + (i % cols) * cellPadding},${ Math.floor(i / cols) * cellHeight + Math.floor(i / cols) * cellPadding })` ); // for each cell allocate the graph cell.each(function (d, i) { let countryData = oilPricesOPEC.filter((o) => o["Country"] === d); // chart if (graph === "barChart") { d3.select(this) .append("g") .selectAll("rect") .data(countryData) .join("rect") .attr("fill", (o) => o.priceCategory === breakEvenPrice1 ? "#002d9c" : "#1192e8" ) .attr("x", (o) => x(o["priceCategory"])) .attr("y", (o) => y(o["acc"])) .attr("height", (o) => y(0) - y(o["acc"])) .attr("width", x.bandwidth()); } else { d3.select(this) .append("g") .selectAll("rect") .data(countryData) .join("rect") .attr("fill", (o) => o.priceCategory <= breakEvenPrice1 ? "#002d9c" : "#1192e8" ) .attr("x", (o) => x(o["priceCategory"])) .attr("y", (o) => y(o["acc"])) .attr("height", (o, i) => { if (i === 0) return y(0) - y(o["acc"]); let prevRowIndex = _.findIndex( countryData, (d) => d.priceCategory === o.priceCategory ) - 1; return y(countryData[prevRowIndex].acc) - y(o.acc); }) .attr("width", x.bandwidth()); } // title d3.select(this) .append("text") .style("font", "bold 12px sans-serif") .attr("transform", `translate(${cellPadding},${cellPadding * 2})`) .text(d); d3.select(this).append("g").attr("class", "x-axis").call(xAxis); d3.select(this).append("g").attr("class", "y-axis").call(yAxis); // profitability text let countryRow = _.find( countryData, (d) => d.priceCategory === breakEvenPrice1 ); let profitableShare = countryRow.acc / d3.sum(countryData, (d) => d["Resources (Million bbl)"]); d3.select(this) .append("text") .style("font", "11px sans-serif") .attr("fill", "grey") .attr("text-anchor", "middle") .attr( "transform", `translate(${x(countryRow["priceCategory"])},${ y(countryRow["acc"]) - 5 })` ) .text(d3.format(".0%")(profitableShare)); }); return svg.node(); }34:Tc0a,viewof chartGas = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let countries = Array.from( gasOPEC === "OPEC" ? gasPricesTableOPEC.values("Country") : gasPricesTableNonOPEC.values("Country") ).slice(0, 12); let gasPricesOPEC = gasPrices.filter((d) => countries.includes(d.Country)); // build grid to allocate countries let cols = 4; // build grid of cells const cell = svg .append("g") .attr("transform", "translate(50, 0)") .style("font", "12px sans-serif") .selectAll("g") .data(countries) .join("g") .attr( "transform", (d, i) => `translate(${(i % cols) * cellWidth + (i % cols) * cellPadding},${ Math.floor(i / cols) * cellHeight + Math.floor(i / cols) * cellPadding })` ); // for each cell allocate the graph cell.each(function (d, i) { let countryData = gasPricesOPEC.filter((o) => o["Country"] === d); // chart if (graph === "barChart") { d3.select(this) .append("g") .selectAll("rect") .data(countryData) .join("rect") .attr("fill", (o) => o.priceCategory <= breakEvenPriceGas ? "#002d9c" : "#1192e8" ) .attr("x", (o) => xGas(o["priceCategory"])) .attr("y", (o) => yGas(o["acc"])) .attr("height", (o) => yGas(0) - yGas(o["acc"])) .attr("width", xGas.bandwidth()); } else { d3.select(this) .append("g") .selectAll("rect") .data(countryData) .join("rect") .attr("fill", (o) => o.priceCategory === breakEvenPriceGas ? "#002d9c" : "#1192e8" ) .attr("x", (o) => xGas(o["priceCategory"])) .attr("y", (o) => yGas(o["acc"])) .attr("height", (o, i) => { if (i === 0) return yGas(0) - yGas(o["acc"]); let prevRowIndex = _.findIndex( countryData, (d) => d.priceCategory === o.priceCategory ) - 1; return yGas(countryData[prevRowIndex].acc) - yGas(o.acc); }) .attr("width", xGas.bandwidth()); } // title d3.select(this) .append("text") .style("font", "bold 12px sans-serif") .attr("transform", `translate(${cellPadding},${cellPadding * 2})`) .text(d); d3.select(this).append("g").attr("class", "x-axis").call(xAxisGas); d3.select(this).append("g").attr("class", "y-axis").call(yAxisGas); // profitability text let countryRow = _.find( countryData, (d) => d.priceCategory === breakEvenPriceGas ); let profitableShare = countryRow.acc / d3.sum(countryData, (d) => d["Resources (Million boe)"]); d3.select(this) .append("text") .style("font", "11px sans-serif") .attr("fill", "grey") .attr("text-anchor", "middle") .attr( "transform", `translate(${xGas(countryRow["priceCategory"])},${ yGas(countryRow["acc"]) - 5 })` ) .text(d3.format(".0%")(profitableShare)); }); return svg.node(); }35:T673,oilPrices = { //parse prices data.forEach( (row) => (row["Resources (Million bbl)"] = +row["Resources (Million bbl)"]) ); // fill missing price categories on each country, with 0 production as value let countries = [...new Set(data.map((d) => d["Country"]))], priceCategories = [ ...new Set(data.map((d) => d["Breakeven Oil Price Category"])) ]; countries.forEach((country) => { priceCategories.forEach((priceCategory) => { if ( _.isEmpty( _.filter( data, (row) => row["Country"] === country && row["Breakeven Oil Price Category"] === priceCategory ) ) ) { let sample = _.cloneDeep( _.sample(_.filter(data, (row) => row["Country"] === country)) ); sample = _.set(sample, "Breakeven Oil Price Category", priceCategory); sample = _.set(sample, "Resources (Million bbl)", 0); data.push(sample); } }); }); // get a sortable price category data.forEach(function (row) { let categoryStr = row["Breakeven Oil Price Category"]; row.priceCategory = categoryStr .substring(categoryStr.indexOf("bbl") + 3) .trim(); row.priceCategory = parseInt(row.priceCategory.substring(0, 3)); }); // get cumulative sum of resources by country return aq .from(data) .filter((d) => d["Breakeven Oil Price Category"] !== "N/A") .orderby("Country", "priceCategory") .groupby("Country") .derive({ acc: aq.rolling( (d) => op.sum(d["Resources (Million bbl)"]), [-Infinity, 0] ) }) .objects(); }36:T68b,gasPrices = { //parse prices dataGas.forEach( (row) => (row["Resources (Million boe)"] = +row["Resources (Million boe)"]) ); // fill missing price categories on each country, with 0 production as value let countries = [...new Set(dataGas.map((d) => d["Country"]))], priceCategories = [ ...new Set(dataGas.map((d) => d["Breakeven Oil Price Category"])) ]; countries.forEach((country) => { priceCategories.forEach((priceCategory) => { if ( _.isEmpty( _.filter( dataGas, (row) => row["Country"] === country && row["Breakeven Oil Price Category"] === priceCategory ) ) ) { let sample = _.cloneDeep( _.sample(_.filter(dataGas, (row) => row["Country"] === country)) ); sample = _.set(sample, "Breakeven Oil Price Category", priceCategory); sample = _.set(sample, "Resources (Million boe)", 0); dataGas.push(sample); } }); }); // get a sortable price category dataGas.forEach(function (row) { let categoryStr = row["Breakeven Oil Price Category"]; row.priceCategory = categoryStr .substring(categoryStr.indexOf("kcf") + 3) .trim(); row.priceCategory = parseInt(row.priceCategory.substring(0, 3)); }); // get cumulative sum of resources by country return aq .from(dataGas) .filter((d) => d["Breakeven Oil Price Category"] !== "N/A") .orderby("Country", "priceCategory") .groupby("Country") .derive({ acc: aq.rolling( (d) => op.sum(d["Resources (Million boe)"]), [-Infinity, 0] ) }) .objects(); }37:[{"id":"fd92f98b2e033c4228eac3df5f91691519bc396573af22ae8d023fc4ed2d1156d8259438efb62d8b0037ec15bb0c96bfd2e091d4211799c91dc3e43095284dde","href":"https://static.observableusercontent.com/files/fd92f98b2e033c4228eac3df5f91691519bc396573af22ae8d023fc4ed2d1156d8259438efb62d8b0037ec15bb0c96bfd2e091d4211799c91dc3e43095284dde","name":"COUNTRY_NAME_TO_ID.json","type":"application/json","lastModified":1674455623064.467,"size":5241},{"id":"6626184db224ca32c4cfe94a487660e8dcd27f3decf56d3891e1111fa24de69f9c879fcbc5d91742fd900daf7be25841a0ef81538b5f79fc49f0ef23bbf3fb07","href":"https://static.observableusercontent.com/files/6626184db224ca32c4cfe94a487660e8dcd27f3decf56d3891e1111fa24de69f9c879fcbc5d91742fd900daf7be25841a0ef81538b5f79fc49f0ef23bbf3fb07","name":"Rystad Energy Resources and breakeven prices.xlsx - Gas.csv","type":"text/csv","lastModified":1674455623064.467,"size":61390},{"id":"5e450069cdd4e2286c295a0118cfbd39bad04d7bc1b1276c3bafa62bb5e306e885b013d94d5d335eff35b9911228154f9027e2eeaa74c343e1ec7efbb77a6dc4","href":"https://static.observableusercontent.com/files/5e450069cdd4e2286c295a0118cfbd39bad04d7bc1b1276c3bafa62bb5e306e885b013d94d5d335eff35b9911228154f9027e2eeaa74c343e1ec7efbb77a6dc4","name":"Rystad Energy Resources and breakeven prices.xlsx - Oil.csv","type":"text/csv","lastModified":1674455623064.467,"size":109692},{"id":"603855cde2534fafb4f985ddc20633e982f4c9fc8a3aaa46e80c1d2ab54a7b52f67fe010e1217fb31a02d3924831a1a3a3795fd7068d642c8674388809f48338","href":"https://static.observableusercontent.com/files/603855cde2534fafb4f985ddc20633e982f4c9fc8a3aaa46e80c1d2ab54a7b52f67fe010e1217fb31a02d3924831a1a3a3795fd7068d642c8674388809f48338","name":"visualization@1.vg.json","type":"application/json","lastModified":1674471715279.84,"size":650077},{"id":"f0c3ff5fd299afbd302e42ca5bfe968ae837ac0c36bf5780cd06c5edd9a1bd640e2dfd8121073e97e01bcfc4a7625dcdf39df4fa75a835118681edbc1cb7a0f3","href":"https://static.observableusercontent.com/files/f0c3ff5fd299afbd302e42ca5bfe968ae837ac0c36bf5780cd06c5edd9a1bd640e2dfd8121073e97e01bcfc4a7625dcdf39df4fa75a835118681edbc1cb7a0f3","name":"sample-img.png","type":"image/png","lastModified":1674474533991.124,"size":96758}] 2f:{"title":"Oil and gas breakeven prices","cells":[{"id":0,"value":"# Oil and gas breakeven prices","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":975,"value":"sampleImg = FileAttachment(\"sample-img.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"\n\n👇 For the ten largest OPEC and non-OPEC producers, share of crude oil reserves that are viable at any given price can be explored below.","pinned":false,"hidden":false,"mode":"md"},{"id":653,"value":"md`Use controls to select an oil breakeven price, to toggle between all countries, OPEC countries or Non-OPEC countries, and whether to sort by country's reserves or % of profitabily.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"viewof breakEvenPrice = Inputs.range(\n d3.extent(_.uniqBy(oilPrices, \"priceCategory\"), (d) => d.priceCategory),\n {\n step: 5,\n label: \"Oil breakeven price\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"viewof oilOPECMarimekko = Inputs.radio([\"All\",\"OPEC\", \"Non-OPEC\"], {\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"viewof sortByProfitability = Inputs.checkbox([\"\"], {\n label: \"Sort by profitability:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"UX Notes:\n\n- The chart is effective at showcasing the % of profitability among countries. While this kind of marimekko chart uses to be a bit hard to read, offsetting the Y does the job at highlighting the amount of oil reserves above the threshold.\n- Sorting: some trade-offs here. Keeping the countries sorted by share of viable reserves gives the whole picture of profitability ranking, while still being easy to locate the bigger producers. You get it all but at the cost of too much animation involved, animating bars both horizontal and vertically is too overwhelming.\n- Better to just provide the break even price slider and animate the vertical alignment of countries accordingly, without resorting horizontally.","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"md`

\n## Preliminary designs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"Quick-and-dirty exploration of data consists on some small multiples to display profitability percentages across countries through the different break even prices.\n

\n👀 Quick takeaways are:
\n

Difference of magnitude in terms of resources (million bbl, barrel of crude oil) will hinder comparison on small producers.
potential interesting point: focus on those increments in price that lead to big jumps in profitability (waterfall chart?).
Find a proper design to show together size of production and profitability across prices.

","pinned":false,"hidden":false,"mode":"html"},{"id":347,"value":"viewof graph = Inputs.radio([\"barChart\", \"Waterfall\"], {\n label: \"type of graph\",\n value: \"barChart\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"viewof oilOPEC = Inputs.radio([\"OPEC\", \"Non-OPEC\"], {\n value: \"OPEC\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"viewof breakEvenPrice1 = Inputs.range(\n d3.extent(_.uniqBy(oilPrices, \"priceCategory\"), (d) => d.priceCategory),\n {\n step: 5,\n label: \"Oil breakeven price\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"Setting up an interactive control to play with the price range, now with gas prices insted of oil prices.
\n🤔 Think of a way to make more evident to users the changes in profitability share as they update the breakeven prices.","pinned":false,"hidden":false,"mode":"html"},{"id":469,"value":"viewof gasOPEC = Inputs.radio([\"OPEC\", \"Non-OPEC\"], {\n value: \"OPEC\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"viewof breakEvenPriceGas = Inputs.range(\n d3.extent(_.uniqBy(gasPrices, \"priceCategory\"), (d) => d.priceCategory),\n {\n step: 1,\n label: \"Select Gas breakeven price\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"More exploratory charts, this time using [vega.js](https://vega.github.io/vega/). Vega is also a good option when prototyping exploratory charts and often we just embed vega specifications created using its [online editor](https://vega.github.io/editor).","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"vega_spec = FileAttachment(\"visualization@1.vg.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof view = embed(vega_spec)","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`

\n## Data sources and table views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = FileAttachment(\n \"Rystad Energy Resources and breakeven prices.xlsx - Oil.csv\"\n).csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"oilPricesTotal = aq\n .from(oilPrices)\n .groupby(\"Country\")\n .rollup({ total: (d) => op.sum(d[\"Resources (Million bbl)\"]) })\n .orderby(aq.desc(\"total\"))\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"dataGas = FileAttachment(\n \"Rystad Energy Resources and breakeven prices.xlsx - Gas.csv\"\n).csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"country_name_to_id = FileAttachment(\"COUNTRY_NAME_TO_ID.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"oilTotals = {\n // get top N countries\n let countries;\n if (oilOPECMarimekko === \"All\") {\n countries = Array.from(oilPricesTableOPEC.values(\"Country\")).concat(\n Array.from(oilPricesTableNonOPEC.values(\"Country\"))\n );\n } else {\n countries = Array.from(\n oilOPECMarimekko === \"OPEC\"\n ? oilPricesTableOPEC.values(\"Country\")\n : oilPricesTableNonOPEC.values(\"Country\")\n );\n }\n // find for all countries the current price\n let oilPerCountry = oilPrices.filter(\n (d) => countries.includes(d.Country) && d.priceCategory === breakEvenPrice\n );\n // add the % of profitability based on the breakeven price\n oilPerCountry.forEach((row) => {\n let total = _.find(oilPricesTotal, [\"Country\", row.Country]);\n row.total = total.total;\n row.profitableShare = row.acc / total.total;\n });\n oilPerCountry = _.sortBy(oilPerCountry, \"total\")\n .reverse()\n .slice(0, oilOPECMarimekko === \"All\" ? 20 : 10);\n\n return oilPerCountry;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"Inputs.table(oilTotals)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"Oil Rankings for overall and by OPEC/Non OPEC countries:","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"viewof oilPricesTable = aq\n .from(oilPrices)\n .groupby(\"Country\")\n .rollup({\n max: (d) => op.mean(d[\"Resources (Million bbl)\"]),\n count: op.count()\n })\n .filter((d) => d.count > 10)\n .orderby(aq.desc(\"max\"))\n .view(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"viewof oilPricesTableOPEC = aq\n .from(oilPrices)\n .filter((d) => d[\"OPEC NON-OPEC\"] === \"OPEC\")\n .groupby(\"Country\")\n .rollup({\n max: (d) => op.mean(d[\"Resources (Million bbl)\"]),\n count: op.count()\n })\n .filter((d) => d.count > 10)\n .orderby(aq.desc(\"max\"))\n .view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof oilPricesTableNonOPEC = aq\n .from(oilPrices)\n .filter((d) => d[\"OPEC NON-OPEC\"] === \"Non-OPEC\")\n .groupby(\"Country\")\n .rollup({\n max: (d) => op.mean(d[\"Resources (Million bbl)\"]),\n count: op.count()\n })\n .filter((d) => d.count > 10)\n .orderby(aq.desc(\"max\"))\n .view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"Gas Rankings for overall and by OPEC/Non OPEC countries:","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"viewof gasPricesTable = aq\n .from(gasPrices)\n .groupby(\"Country\")\n .rollup({\n max: (d) => op.mean(d[\"Resources (Million boe)\"]),\n count: op.count()\n })\n .filter((d) => d.count > 10)\n .orderby(aq.desc(\"max\"))\n .view(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"viewof gasPricesTableOPEC = aq\n .from(gasPrices)\n .filter((d) => d[\"OPEC NON-OPEC\"] === \"OPEC\")\n .groupby(\"Country\")\n .rollup({\n max: (d) => op.mean(d[\"Resources (Million boe)\"]),\n count: op.count()\n })\n .filter((d) => d.count > 10)\n .orderby(aq.desc(\"max\"))\n .view(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"viewof gasPricesTableNonOPEC = aq\n .from(gasPrices)\n .filter((d) => d[\"OPEC NON-OPEC\"] === \"Non-OPEC\")\n .groupby(\"Country\")\n .rollup({\n max: (d) => op.mean(d[\"Resources (Million boe)\"]),\n count: op.count()\n })\n .filter((d) => d.count > 10)\n .orderby(aq.desc(\"max\"))\n .view(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"md`

\n## Imports and setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"textures = require(\"textures@1.2.2/dist/textures.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"cellPadding = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"cellHeight = 155","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"cellWidth = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"barHeightM = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"margin = ({ top: 20, right: 0, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${cellPadding},0)`)\n .call(d3.axisLeft(y).ticks(5, d3.format(\".0s\")))\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${cellHeight})`)\n .call(d3.axisBottom(x).tickValues([20, 50, 100]).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"x = d3\n .scaleBand()\n .domain(oilPrices.map((d) => d[\"priceCategory\"]))\n .range([cellPadding, cellWidth - cellPadding])\n .padding(0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(oilPrices, (o) => +o[\"acc\"])])\n .nice()\n .range([cellHeight, cellPadding * 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"xGas = d3\n .scaleBand()\n .domain(gasPrices.map((d) => d[\"priceCategory\"]))\n .range([cellPadding, cellWidth - cellPadding])\n .padding(0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"yGas = d3\n .scaleLinear()\n .domain([0, d3.max(gasPrices, (o) => +o[\"acc\"])])\n .nice()\n .range([cellHeight, cellPadding * 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"xAxisGas = (g) =>\n g\n .attr(\"transform\", `translate(0,${cellHeight})`)\n .call(d3.axisBottom(xGas).tickValues([1, 5, 10, 15]).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"yAxisGas = (g) =>\n g\n .attr(\"transform\", `translate(${cellPadding},0)`)\n .call(d3.axisLeft(yGas).ticks(5, d3.format(\".0s\")))\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"textureNONOPEC = textures\n .lines()\n .orientation(\"diagonal\")\n .size(8)\n .strokeWidth(3)\n .stroke(\"#9f1853\")\n .background(\"#fa4d56\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"textureOPEC = textures\n .lines()\n .orientation(\"diagonal\")\n .size(8)\n .strokeWidth(3)\n .stroke(\"#1192e8\")\n .background(\"#bae6ff\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"baselineYM = 200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"reactiveChart = chartM.update(breakEvenPrice, oilTotals, sortByProfitability)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}