30:T73f,echartOption = ({ backgroundColor: '#EDF2F7', title: { text: `${xMetric.split(" [")[0]} &\n${yMetric} by Country`, padding: [0, 5] }, legend: { top: 35, data: Object.keys(echartsSeries) }, xAxis: { nameLocation: 'center', name: xMetric.split(' [')[0], nameTextStyle: { lineHeight: 25, } }, yAxis: { nameLocation: 'center', nameGap: 20, name: yMetric }, tooltip: { showDelay: 0, formatter: params => params.data[3] ? `${params.data[3]}

Population: ${params.data[2]}

${xMetric.split(' [')[0]}: ${params.data[0]}

${yMetric}: ${params.data[1]}

` : '' }, toolbox: { show: true, feature: { dataZoom: { title: { zoom: 'area zooming', back: 'restore area zooming' } }, saveAsImage: { title: 'save as image' } } }, dataZoom: [ { id: 'dataZoomY', type: 'slider', yAxisIndex: [0], showDataShadow: false, left: '92%', width: '15px' }, { id: 'dataZoomX', type: 'slider', xAxisIndex: [0], showDataShadow: false, height: '15px', top: '97%' } ], series: Object.keys(echartsSeries).map(continent => ({ name: continent, data: echartsSeries[continent], markLine: { silent: true, data: scatterStyling.includes('change') ? echartsMarklines[continent] : [] }, type: 'scatter', cursor: 'default', symbolSize: data => scatterStyling.includes('size') ? Math.sqrt(data[2]) / 5e2 : 5, hoverAnimation: false, itemStyle: { color: scatterStyling.includes('colour') ? undefined : '#000000' }, label: { show: true, position: 'right', formatter: param => param.data[3] } })) });31:T431,covidMetricsDefinitions = { const defs = {} defs["Sum of COVID-19 cases"] = "Total of recorded cases of Covid-19"; defs["Sum of COVID-19 related deaths"] = "Total of recorded deaths related to Covid-19"; defs["Sum of COVID-19 cases per million inhabitants"] = "Total of recorded cases of Covid-19 divided by inhabitants and multiplied by 1,000,000. Note that countries with less than one million inhabitants are also included"; defs["Sum of COVID-19 related deaths per million inhabitants"] = "Total of Covid-19 related deaths divided by inhabitants and multiplied by 1,000,000. Note that countries with less than one million inhabitants are also included"; defs["COVID-19 related deaths per COVID-19 Case"] = "Ratio of Total of recorded cases of Covid-19 and recorded deaths related to Covid-19 to date. This ratio should not be interpreted as a nation's fatality rate and should be taken with a grain of salt, since the pandemic is still ongoing and the availablility of testing and accuracy of recorded cases is different for each country"; return defs; };32:[{"id":"4aefe623b3880c7a4cbc3be7009f12d702c5dd9e70e81d2c52be849c48a3d6f1964af6bd1421d8ac6da95595de9db25506b3344955d18c0dae5b36a88283caee","href":"https://static.observableusercontent.com/files/4aefe623b3880c7a4cbc3be7009f12d702c5dd9e70e81d2c52be849c48a3d6f1964af6bd1421d8ac6da95595de9db25506b3344955d18c0dae5b36a88283caee","name":"country-and-continent-codes-list-csv_csv.txt","type":"text/plain","lastModified":1615485897162.289,"size":12344},{"id":"50d77db758a09c0d13ddd83222c483bfe1d72d3e317a77367dab6dedb55394904e1be8a3db909487779efcc8e5d367f3eb1f514508853ea8c7ab84c239becc95","href":"https://static.observableusercontent.com/files/50d77db758a09c0d13ddd83222c483bfe1d72d3e317a77367dab6dedb55394904e1be8a3db909487779efcc8e5d367f3eb1f514508853ea8c7ab84c239becc95","name":"blog2018@1.csv","type":"text/csv","lastModified":1617740042435.102,"size":26067},{"id":"70c3281827ebb1e2b96a9766f71b623b81687f0d19fe92247b65d389cdcfb762ac48f5dbf71279a2bb94562dd580c3f2c6e4c498e7b18780f21c2a8166c35604","href":"https://static.observableusercontent.com/files/70c3281827ebb1e2b96a9766f71b623b81687f0d19fe92247b65d389cdcfb762ac48f5dbf71279a2bb94562dd580c3f2c6e4c498e7b18780f21c2a8166c35604","name":"blog2018@4.csv","type":"text/csv","lastModified":1617764462179.831,"size":26010},{"id":"9460f82052ba775d9e0f2ca18668b48a07325e96aca2991bf6ad5b93846126e63ba3a9be0d090979e3f137fd1cea7f2764da8e6ee707eb0f85a68267199ce1ab","href":"https://static.observableusercontent.com/files/9460f82052ba775d9e0f2ca18668b48a07325e96aca2991bf6ad5b93846126e63ba3a9be0d090979e3f137fd1cea7f2764da8e6ee707eb0f85a68267199ce1ab","name":"blog2019@1.csv","type":"text/csv","lastModified":1617764156636.471,"size":26067},{"id":"d34829acca622f5d01d441f9c69b4fe1e7a22afedbf2672ccfc76891268598690019d911607699fea74119b5afd9da512ac495430b18e9de251b493cc2e46353","href":"https://static.observableusercontent.com/files/d34829acca622f5d01d441f9c69b4fe1e7a22afedbf2672ccfc76891268598690019d911607699fea74119b5afd9da512ac495430b18e9de251b493cc2e46353","name":"coal_meta@1.csv","type":"text/csv","lastModified":1617738814808.022,"size":1978},{"id":"9460f82052ba775d9e0f2ca18668b48a07325e96aca2991bf6ad5b93846126e63ba3a9be0d090979e3f137fd1cea7f2764da8e6ee707eb0f85a68267199ce1ab","href":"https://static.observableusercontent.com/files/9460f82052ba775d9e0f2ca18668b48a07325e96aca2991bf6ad5b93846126e63ba3a9be0d090979e3f137fd1cea7f2764da8e6ee707eb0f85a68267199ce1ab","name":"blog2019.csv","type":"text/csv","lastModified":1617738823010.871,"size":26067}] 2e:{"title":"BP Energy Outlook & World Bank Development Indicators","cells":[{"id":0,"value":"md`# BP Energy Outlook & World Bank Development Indicators`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"viewof scatterStyling = checkbox({\n title: \"Style scatter plot elements\",\n // description: \"Check to size dots by inhabitants of each country as of 2018.\",\n options: [\n { value: \"size\", label: \"Size by population\" },\n { value: \"colour\", label: \"Colour by continent\" },\n { value: \"change\", label: \"Show change to previous year\" }\n ],\n value: [ \"size\", \"colour\" ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"chartContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"viewof xMetric = select({\n title: \"Select World Development Indicator for x-axis:\",\n // description: \"Select COVID-19 metric for y-axis.\",\n options: devIndicatorMetrics,\n value: \"Adjusted net national income per capita (constant 2010 US$) [NY.ADJ.NNTY.PC.KD]\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"viewof yMetric = select({\n title: \"Select BP Energy Outlook metric for y-axis:\",\n options: covidMetrics,\n value: \"Energy intensity level of primary energy (MJ/$2011 PPP GDP) [EG.EGY.PRIM.PP.KD]\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`**Y-Metric definition**: _${covidMetricsDefinitions[yMetric]}_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`**X-Metric definition**: _${(devIndicatorMetadata.find(d => d[\"Indicator Name\"] === xMetric.split(\" [\")[0]) || { 'Long definition': '' })['Long definition']} Countries that have no data for this metric will not appear on the chart._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`\n---\n\nThe chart is made with the [ECharts](https://github.com/apache/incubator-echarts) library and the code is below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`The sections below contain the Echarts chart settings, mapping the data to the correct format for Echarts and initialising the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"echartsInitialised = {\n echarts.init(chartContainer).setOption(echartOption);\n return true;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":992,"value":"echartsMarklines = {\n const echartsMarklines = {};\n mergedSpreadsheetData.forEach(row => {\n if (row.Continent_Name && row[xMetric] !== \"..\") {\n const prevRow = mergedSpreadsheetDataPrevWeek.find(pwr => pwr.Three_Letter_Country_Code === row.Three_Letter_Country_Code);\n if (prevRow) {\n const echartsRow = [{\n symbolSize: 6,\n symbol: 'diamond',\n coord: [ parseFloat(row[xMetric]), parseFloat(prevRow[yMetric]) ]\n },\n {\n symbolSize: 6,\n // symbol: 'none',\n coord: [parseFloat(row[xMetric]) , parseFloat(row[yMetric]) ]\n }];\n\n echartsMarklines[row.Continent_Name]\n ? echartsMarklines[row.Continent_Name].push(echartsRow)\n : echartsMarklines[row.Continent_Name] = [echartsRow];\n }\n }\n });\n return echartsMarklines;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"echartsSeries = {\n const echartsSeries = {};\n mergedSpreadsheetData.forEach(row => {\n if (row.Continent_Name && row[xMetric] !== '..') {\n const echartsRow = [\n parseFloat(row[xMetric]), // x-axis\n parseFloat(row[yMetric]), // y-axis\n row['Population (2019)'], // size\n row['Countries and Territories'].replace(/_/g, ' ') // label\n ];\n \n echartsSeries[row.Continent_Name]\n ? echartsSeries[row.Continent_Name].push(echartsRow)\n : echartsSeries[row.Continent_Name] = [echartsRow];\n }\n });\n return echartsSeries;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"md`Here I'm storing all metrics in arrays and filtering out those where more than 25 countries have no recorded data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"devIndicatorMetrics = {\n const emptyMetricCount = {};\n const filteredDevIndicatorMetrics = [];\n const allDevIndicatorMetrics = Object.keys(mergedSpreadsheetData[0]).slice(12);\n mergedSpreadsheetData.forEach(d => {\n allDevIndicatorMetrics.forEach(m => {\n emptyMetricCount[m] = emptyMetricCount[m] ? emptyMetricCount[m] : 0\n if (d[m] === \"..\") {\n emptyMetricCount[m] = emptyMetricCount[m] + 1;\n }\n })\n })\n allDevIndicatorMetrics.forEach(m => {\n if (emptyMetricCount[m] <= 100) {\n filteredDevIndicatorMetrics.push(m);\n }\n })\n return filteredDevIndicatorMetrics;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"covidMetrics = Object.keys(mergedSpreadsheetData[0]).slice(10,13);","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"md`Below I am loading the merged data that I exported from the Google Spreadsheet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"mergedSpreadsheetData = d3.csvParse(\n await FileAttachment(\"blog2019@1.csv\").text(),\n d3.autoType\n).map(row => {\n const countryInfo = countryMetaData.find(cmd =>\n cmd[\"Three_Letter_Country_Code\"] === row[\"Country Code\"]\n );\n return {\n ...countryInfo,\n ...row\n };\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1096,"value":"mergedSpreadsheetDataPrevWeek = d3.csvParse(\n await FileAttachment(\"blog2018@4.csv\").text(),\n d3.autoType\n).map(row => {\n const countryInfo = countryMetaData.find(cmd =>\n cmd[\"Three_Letter_Country_Code\"] === row[\"Country Code\"]\n );\n return {\n ...countryInfo,\n ...row\n };\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1050,"value":"devIndicatorMetadata = d3.csvParse(\n await FileAttachment(\"coal_meta@1.csv\").text(),\n d3.autoType\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"countryMetaData = d3.csvParse(\n await FileAttachment(\"country-and-continent-codes-list-csv_csv.txt\").text(),\n d3.autoType\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"echarts = require(\"https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"import { select, checkbox } from \"@jashkenas/inputs\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"md`Legacy from when I tried to import data directly from the [Google spreadsheet with all the calculations]((https://docs.google.com/spreadsheets/d/1XzeSHF9i8dbQ1hLEqyYGifyC0wD1yzTIFuPmx_LxLc4/edit?usp=sharing). Because the spreadsheet imports some external data, I ran into performance issues and empty fields, which is why I decided to upload the export into the notebook and update it periodically by hand instead.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"_mergedSpreadsheetData = {\n const url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT3VoiA9l4A9Men0BY4y0BA8HiCAkKOdplzWTJ_DsKyfTk9Ex_YbaRB3tcAbiYG-rIce3Dj0vINwP8f/pub?gid=144603776&single=true&output=csv\"\n let spreadsheetData;\n const spreadsheet = await d3.csv(url).then(data => {\n spreadsheetData = [ ... data ];\n });\n return spreadsheetData.map(row => {\n const countryInfo = countryMetaData.find(cmd => cmd[\"Three_Letter_Country_Code\"] === row[\"Country Code\"]);\n return {\n ...countryInfo,\n ...row\n };\n });\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"_devIndicatorMetadata = {\n const url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT3VoiA9l4A9Men0BY4y0BA8HiCAkKOdplzWTJ_DsKyfTk9Ex_YbaRB3tcAbiYG-rIce3Dj0vINwP8f/pub?gid=125150895&single=true&output=csv\"\n let spreadsheetData;\n const spreadsheet = await d3.csv(url).then(data => {\n spreadsheetData = [ ... data ];\n });\n return spreadsheetData;\n};","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}