${data[range].title[0]}${labels[i] && ` (${labels[i]})`} ${data[range].title[1]}${labels[j] && ` (${labels[j]})`}

29:null 2a:["$","title",null,{"children":"Change in CO2 and GDP (PPP) over years | Djordje Rakonjac | Observable"}] 2f:T4c4,map = { let svg = d3.select(DOM.svg(960, 900)) .style("max-width", "100%") .style("height", "auto") // legend svg.append(legend) .attr("transform", "translate(870,450)"); svg.selectAll('path') .data(topojson.feature(europe, europe.objects.europe).features) .enter() .append('path') .attr('d', path) .attr('class', function(d) { return iso_codes.find(c => { return c.ISO_3166_2 === d.id }).ISO_3166_3; }) .attr('fill', function(d) { let code = iso_codes.find(c => { return c.ISO_3166_2 === d.id }).ISO_3166_3; return color[range](data[range].get(code)); }) .attr("stroke", "white") .attr("stroke-linejoin", "round") .append("title") .text(d => { let code = iso_codes.find(c => { return c.ISO_3166_2 === d.id }).ISO_3166_3; return `${d.properties.NAME}, ${format(data[range].get(code))}` }); ; // year ticker svg .append('g') .append('text') .attr('x', function(d) { return '20'; }) .attr('y', function(d) { return '70'; }) .style('font-family', 'sans-serif') .style('font-size', 52) .text(function(d) { return `${range}`; }) .style('fill', '#aaa'); return svg.node(); }30:T468,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data[range].title[0]}${labels[i] && ` (${labels[i]})`} ${data[range].title[1]}${labels[j] && ` (${labels[j]})`} `)} ${data[range].title[0]} ${data[range].title[1]} `; }31:[] 2d:{"id":"9e6f44d9a4aa56ae","slug":"change-in-co2-and-gdp-ppp-over-years","title":"Change in CO2 and GDP (PPP) over years","thumbnail":"64637701ec1a2a823f4485944c76229aa324ba1557ed612ba73076ff0395e6e9","access_level":"public","create_time":"$D2019-04-26T07:57:27.271Z","update_time":"$D2019-04-26T10:02:56.668Z","view_time":null,"first_public_time":"$D2019-04-26T10:03:14.729Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"624d132e4fbbabaf","login":"djr4","name":"Djordje Rakonjac","avatar_url":"https://avatars-next.observableusercontent.com/677d588e86321eebf24f0b105eba295e09ddb5b61407dea90a4eb04be11a3688","tier":"starter_2024"},"version":1106,"publish_version":1106,"role":null,"authored":false,"authors":[{"type":"individual","id":"126f63b7584d299a","login":"djr4","name":"Djordje Rakonjac","avatar_url":"https://avatars-next.observableusercontent.com/677d588e86321eebf24f0b105eba295e09ddb5b61407dea90a4eb04be11a3688","tier":null}],"members":[{"type":"individual","id":"126f63b7584d299a","login":"djr4","name":"Djordje Rakonjac","avatar_url":"https://avatars-next.observableusercontent.com/677d588e86321eebf24f0b105eba295e09ddb5b61407dea90a4eb04be11a3688","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Change in CO2 and GDP (PPP) over years","cells":[{"id":899,"value":"md`# Change in CO₂ and GDP (PPP) over years`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`\nWe show bivariate choropleth that illustrates annual GDP per capita and\nCO₂ emissions in metric kg (kilograms) per capita over the years.\n\nFor some countries there is no data for all years. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"md`Note: Use slider to investigate concrete year`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"viewof range = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"viewof colors = {\n const form = html`

`;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`\n## Sources:\n- https://data.worldbank.org\n- http://www.globalcarbonatlas.org/en/CO2-emissions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/\nschemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"start_year = 1990","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"end_year = 2018","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"x = {\n let tmp = [];\n for(let i = start_year; i < end_year; i++) {\n tmp[i] = (d3.scaleQuantile(Array.from(data[i].values(), d => d[0]), d3.range(n)));\n }\n \n return tmp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"y = { \n let tmp = [];\n for(let i = start_year; i < end_year; i++) {\n tmp[i] = (d3.scaleQuantile(Array.from(data[i].values(), d => d[1]), d3.range(n)))\n }\n \n return tmp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"color = {\n let f = [];\n for(let i = start_year; i < end_year; i++) {\n f[i]=\n value => {\n if (!value) return \"#fff\";\n let [a, b] = value;\n return colors[y[i](b) + x[i](a) * n];\n }\n \n }\n return f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `\\n${a === 0 ? 'N/A' : d3.format(\",\")(parseInt(a)) + '$'} ${data[range].title[0]}${labels[x[range](a)] && ` (${labels[x[range](a)]})`}\n${b && !isNaN(b) ? b.toFixed(4) : 'N/A'} ${data[range].title[1]}${labels[y[range](b)] && ` (${labels[y[range](b)]})`}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"lMargin = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"iso_codes = (await d3.csv('https://gist.githubusercontent.com/djr4/c06e72fdde0d2780e0831343b1c03c9f/raw/e1894b3b9ac2e448619a1d62266b49c46f949f36/iso3166_alpha2_alpha3.csv'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"gdp = (await d3.csv('https://gist.githubusercontent.com/djr4/f688121dc9cb208ec4daca7e337273cb/raw/3056f701e33ebd9c8c1ab1b1297ac15dd311c0a6/gdp_per_capita_ppp_1990-2017.csv'));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"data = {\n \n let a = [];\n for(let i = start_year; i < end_year; i++) {\n let obj = gdp.map(d => {\n let co2_f = c02.find(c => { return d.country_name === c.country_name; });\n\n return [d.country_code, [+d[i], co2_f ? parseFloat(co2_f[i]) : null ]]\n })\n \n a[i] = Object.assign(new Map(obj), { title : [\"GDP per capita\", \"C02 in kg\"] });\n\n }\n \n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"c02 = (await d3.csv('https://gist.githubusercontent.com/djr4/badcf11d61e352e9672337084ec502d4/raw/e6a5ebd78a477a8b6b11ea11c287a40e82ad8d9f/co2_emissions_1960_2017.csv'))\n.map(d => {\n const pop = population.find(p => { return p.country_name === d.country_name });\n console.log(pop);\n for(let i = start_year; i < end_year; i++) {\n if(d && pop && d[i] && pop[i]) { \n d[i] = parseFloat(d[i]) / parseInt(pop[i]) * 1000; // to kg\n }\n }\n \n return d;\n});\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"population = (await d3.csv('https://gist.githubusercontent.com/djr4/5badd79baa7b870f06e46243e2365806/raw/535c85e0ff0095dd6a8abcfdaf42be6376017bc0/world_population_1960_2017.csv'));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"europe = fetch('https://gist.githubusercontent.com/djr4/6a8e88d0efdf52d4e75edd9a133917f3/raw/821143de54ba6bf406d1a1588428b076feb33383/europe.topojson').then(res => res.json());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoMercator()\n .center([13, 52]) \t\t\t\t\t\n\t.translate([width/2, height/1.2]) \t\t\n\t.scale([width/1.3]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"