40:null 41:["$","title",null,{"children":"Income vs Emissions | Elias Chaflo | Observable"}] 47:T468,{ const xdomain=[1950,2018] d3.select("#scatterviz").attr("width",width) return Table( d3.groups(data, d => d.country) .map(([key, data]) => { const matchRow = data.find(d=>yearX===d.year) return({ "Country": key, "Country Name": data[0].countryName, "Continent Name": data[0].continent.name, "Income trend": data, "Emissions trend": data, }) }), { layout: "auto", rows: Infinity, sort: "Country", reverse: false, format: { "Income trend": data => sparkarea({ data:data, x: data.map(d => d.year), y: data.map(d => Math.max(0, d.income)), color: colors.find(d=>d.group.code===data[data.length-1]["continent"].code).color, xdomain }), "Emissions trend": data => sparkarea({ data:data, x: data.map(d => d.year), y: data.map(d => Math.max(0, d.emissions)), color: colors.find(d=>d.group.code===data[data.length-1]["continent"].code).color, xdomain }) } } ) }48:T1206,{ const svg = d3.select("#scatterviz") const viz = svg.select("#points") .attr("width", width) .attr("height", svg.attr("height")) const height = viz.attr("height") /* Edges calculations */ const edges = { left: margin.left, top: margin.top, right: width - margin.left - margin.right, bottom: height - margin.top - margin.bottom } /* x Axis */ const xAxis = g => g .transition().duration(500) .attr("transform", `translate(0,${edges.bottom})`) .call(d3.axisBottom(x)); svg.select("#xAxis") .call(xAxis); /* y Axis */ const yAxis = g => g .transition().duration(500) .attr("transform", `translate(${edges.left},0)`) .call(d3.axisLeft(y)); svg.select("#yAxis") .call(yAxis); /* Circles */ viz.selectAll("circle").data(dataByYear, d => d.country) .join("circle") .attr("id", d => d.country) .attr("class", d => d["continent"].code) .style("fill", d => colors.find(color => color.group.code === d["continent"].code).color) .style("fill-opacity", 0.8) .style("stroke", "#000") .style("stroke-width", 0.5) .transition().duration(500) .attr("cx", d => x(d.income)) .attr("cy", d => y(d.emissions) ? y(d.emissions) : height) .attr("r", d => y(d.emissions) ? 5 : 0) /* Tooltip - Voronoi */ const delaunay = d3.Delaunay.from( dataByYear, d => x(d.income), d => y(d.emissions) ); const voronoi = delaunay.voronoi([edges.left, edges.top, edges.right, edges.bottom]); const tooltip = d3.select("#tooltip"); svg.select("#voronoi") .selectAll("path") .data(dataByYear, d => d.country) .join("path") .style("stroke","#9991") .style("stroke-width",0.5) .style("pointer-events", "all") //important! .attr("d", (d, i) => voronoi.renderCell(i)) .on("mouseover", (a,b) => { viz.selectAll("circle") .style("fill-opacity",0.1) viz.selectAll(`.${b["continent"].code}`) .style("fill-opacity",1) viz.select(`#${b.country}`) .style("stroke-width",2) .attr("r",8) /* regression */ d3.selectAll(`.line_${b["continent"].code}`) .style("stroke-width",2.5) .attr("stroke-dasharray", 0) /* tooltip */ const posX = d3.min([Math.round(x(b.income)) + 20, edges.right - 250]); const posY = d3.min([Math.round(y(b.emissions)) + 20, edges.bottom - 100]); d3.select("#tooltip") .style("z-index", 100) .style("box-shadow","3px 3px 5px #0001") .style("background-color", "#fffe") .style("padding", "10px") .style("max-width", "250px") .style("font-size", "12px") .transition().duration(100) .style("left", `${posX}px`) .style("top", `${posY}px`); tooltip.node().innerHTML= `

${b.countryName}

` tooltip.node().innerHTML+= `Income per person: ` tooltip.node().innerHTML+= `${b.income}
` tooltip.node().innerHTML+= `CO2e emissions per person: ` tooltip.node().innerHTML+= `${b.emissions}` }) .on("mouseleave", (a,b) => { viz.selectAll("circle") .style("fill-opacity",0.8); viz.select(`#${b.country}`) .style("stroke-width",0.5) .attr("r",5); d3.selectAll(`.line_${b["continent"].code}`) .style("stroke-width",1) .attr("stroke-dasharray", 5) tooltip .style("background-color","#0000") .style("box-shadow",null) .node().innerHTML = null; }) const regressions = d3.groups(dataByYear, d => d["continent"].code) .map(g => { return ({ group: g[0], regression: ss.linearRegressionLine( ss.linearRegression( dataByYear .filter(row => row["continent"].code === g[0] ) .map(d => [x(d.income), y(d.emissions)]))) }) }) svg.select("#regressions") .selectAll("line") .data(regressions) .join("line") .attr("class",d =>`line_${d.group}`) .attr("stroke", d => colors.find(color => color.group.code === d.group).color) .attr("stroke-width", 1) .attr("stroke-dasharray", 5) .transition().duration(500) .attr("x1", x(xdom[0])) .attr("x2", x(xdom[1])) .attr("y1", d => d.regression(x(xdom[0]))) .attr("y2", d => d.regression(x(xdom[1]))); }49:[] 45:{"id":"25a863c64c824a34","slug":null,"title":"Income vs Emissions","thumbnail":"0e5e50e5e14a1b7010b3a4498668728779880d3a69214774dbcc31a0aad98167","access_level":"public","create_time":"$D2022-10-19T06:27:53.303Z","update_time":"$D2024-01-16T08:14:36.515Z","view_time":null,"first_public_time":"$D2022-10-19T19:28:46.383Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0e9f3cc5915f043f","login":"eliaschaflo","name":"Elias Chaflo","avatar_url":"https://avatars-next.observableusercontent.com/335831b92bb6d1db0afc78be29be697c2d8bc5845e77ef362a133b6dc9f48662","tier":"starter_2024","bio":"","following":false},"version":1442,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3a9993096a5c91b","login":"eliaschaflo","name":"Elias Chaflo","avatar_url":"https://avatars-next.observableusercontent.com/335831b92bb6d1db0afc78be29be697c2d8bc5845e77ef362a133b6dc9f48662","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d3a9993096a5c91b","login":"eliaschaflo","name":"Elias Chaflo","avatar_url":"https://avatars-next.observableusercontent.com/335831b92bb6d1db0afc78be29be697c2d8bc5845e77ef362a133b6dc9f48662","tier":null,"role":"editor"},{"type":"individual","id":"8ca7a805cd8b9a96","login":"frederickayala","name":"Frederick Ayala","avatar_url":"https://avatars-next.observableusercontent.com/e526fe759dd00c46b346aba4660be1935ed2828a6acd1078dce967d560739634","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Income vs Emissions","cells":[{"id":0,"value":"# Income vs Emissions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1435,"value":"This visualization shows the correlation between Income levels and CO2 emissions of different countries. Yal Fuentes analysis shows that richer countries tends to generate more CO2. The analysis can be found here: https://github.com/yal-fuentes/personal-notebooks/blob/main/stan/Income_vs_emissions.ipynb\n\n(Data takes some time to load)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1047,"value":"#### Year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":568,"value":"viewof yearX = Scrubber(d3.groups(data, d => d.year).map(([key, data]) =>key), {delay: 700, autoplay: false, loop:false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"#### Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"viewof scale = Inputs.radio([\"scaleLinear\", \"scaleLog\"], {label: \"Visualization Scale\", value: \"scaleLinear\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"### Showing year ${yearX}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"Plot.legend({\n color: {\n domain: colors.map(d=>d.group.name),\n scheme: \"rainbow\"\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"# Data Preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":678,"value":"#### Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"dataIncome = (await d3.csv(\"https://raw.githubusercontent.com/open-numbers/ddf--gapminder--gdp_per_capita_cppp/master/ddf--datapoints--income_per_person_gdppercapita_ppp_inflation_adjusted--by--geo--time.csv\", d3.autoType)).filter(d => d.time <= 2018)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dataEmissions = await d3.csv(\"https://raw.githubusercontent.com/open-numbers/ddf--gapminder--systema_globalis/master/countries-etc-datapoints/ddf--datapoints--co2_emissions_tonnes_per_person--by--geo--time.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"dataContinents=d3.csv(\"https://pkgstore.datahub.io/JohnSnowLabs/country-and-continent-codes-list/country-and-continent-codes-list-csv_csv/data/b7876b7f496677669644f3d1069d3121/country-and-continent-codes-list-csv_csv.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"#### Joining sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"data = dataIncome.map(d => {\n const emissions = dataEmissions.find(e => e.geo===d.geo && e.time===d.time);\n const continent = dataContinents.find(e => e.Three_Letter_Country_Code===d.geo.toUpperCase());\n return({\n country:d.geo.toUpperCase(),\n countryName:continent?(continent.Country_Name.includes(\",\")?`${continent.Country_Name.split(\",\")[1]} ${continent.Country_Name.split(\",\")[0]}`:continent.Country_Name):null,\n continent:continent?{code: continent.Continent_Code, name: continent.Continent_Name}:null,\n year:d.time,\n income:d.income_per_person_gdppercapita_ppp_inflation_adjusted,\n emissions: emissions?emissions.co2_emissions_tonnes_per_person:null,\n })\n}).filter(row=>row.year>=1950 && row.emissions!==0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1401,"value":"# Calculations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1249,"value":"dataByYear = data.filter(e => e.year === yearX && e.emissions!==null);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"height = +d3.select(\"#scatterviz\").attr(\"height\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"xdom = d3.extent(dataByYear, d=>d.income);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"ydom = d3.extent(dataByYear, d=>d.emissions);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"x = d3[scale](xdom, [margin.left, width - margin.left-margin.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"y = d3[scale](ydom, [height-margin.bottom-margin.top, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1063,"value":"# Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1119,"value":"function rgbtorgba(rgb,a) {\n return rgb.replace(\"rgb\",\"rgba\").replace(`)`,`,${a})`)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"margin = {\n return {\n top:10,\n bottom:20,\n left:40,\n right:5\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"colors = {\n const groups = d3.groups(data, d => d[\"continent\"].code)\n .map(d => {\n return({\n code:d[0], \n name:d[1][0][\"continent\"].name\n })\n })\n return groups.map((d,i)=> {\n return({\n group: d,\n color: d3.interpolateRainbow(i/(groups.length))\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"function sparkarea({\n data:data,\n x: X,\n y: Y,\n color: color,\n xdomain = d3.extent(X),\n ydomain = d3.extent(Y),\n width = 120,\n height = 20\n}) {\n const x = d3.scaleUtc(xdomain, [0, width]);\n const y = d3.scaleLinear(ydomain, [height, 0]);\n const area = d3.area()\n .x((d, i) => x(X[i]))\n .y1((d, i) => y(Y[i]))\n .y0(height)\n .defined((d, i) => !isNaN(X[i]) && !isNaN(Y[i]));\n return d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"vertical-align\", \"middle\")\n .style(\"margin\", \"-3px 0\")\n .call(g => g.append(\"path\")\n .attr(\"fill\", rgbtorgba(color,0.5))\n .attr(\"d\", area(data)))\n .call(g => g.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", color)\n .attr(\"d\", area.lineY1()(data)))\n .node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"