45:["$","title",null,{"children":"Bubble Chart (Emissions in MtCO2) | FHOÖ Information Visualization | Observable"}] 4d:Te0d,countryRegionMapping = { return { AFG: "Asia", AGO: "Africa", ALB: "Europe", AND: "Europe", ARE: "Asia", ARG: "South America", ARM: "Asia", ATG: "North America", AUS: "Oceania", AUT: "Europe", AZE: "Asia", BDI: "Africa", BEL: "Europe", BEN: "Africa", BFA: "Africa", BGD: "Asia", BGR: "Europe", BHR: "Asia", BHS: "North America", BIH: "Europe", BLR: "Europe", BLZ: "North America", BMU: "North America", BOL: "South America", BRA: "South America", BRB: "North America", BRN: "Asia", BTN: "Asia", BWA: "Africa", CAF: "Africa", CAN: "North America", CHE: "Europe", CHL: "South America", CHN: "Asia", CIV: "Africa", CMR: "Africa", COD: "Africa", COG: "Africa", COL: "South America", COM: "Africa", CPV: "Africa", CRI: "North America", CUB: "North America", CYP: "Asia", CZE: "Europe", DEU: "Europe", DJI: "Africa", DMA: "North America", DNK: "Europe", DOM: "North America", DZA: "Africa", ECU: "South America", EGY: "Africa", ERI: "Africa", ESP: "Europe", EST: "Europe", ETH: "Africa", FIN: "Europe", FJI: "Oceania", FRA: "Europe", GAB: "Africa", GBR: "Europe", GEO: "Asia", GHA: "Africa", GIN: "Africa", GMB: "Africa", GNB: "Africa", GNQ: "Africa", GRC: "Europe", GRD: "North America", GTM: "North America", GUY: "South America", HKG: "Asia", HND: "North America", HRV: "Europe", HTI: "North America", HUN: "Europe", IDN: "Asia", IND: "Asia", IRL: "Europe", IRN: "Asia", IRQ: "Asia", ISL: "Europe", ISR: "Asia", ITA: "Europe", JAM: "North America", JOR: "Asia", JPN: "Asia", KAZ: "Asia", KEN: "Africa", KGZ: "Asia", KHM: "Asia", KIR: "Oceania", KNA: "North America", KOR: "Asia", KWT: "Asia", LAO: "Asia", LBN: "Asia", LBR: "Africa", LBY: "Africa", LCA: "North America", LIE: "Europe", LKA: "Asia", LSO: "Africa", LTU: "Europe", LUX: "Europe", LVA: "Europe", MAC: "Asia", MAR: "Africa", MCO: "Europe", MDA: "Europe", MDG: "Africa", MDV: "Asia", MEX: "North America", MHL: "Oceania", MKD: "Europe", MLI: "Africa", MLT: "Europe", MMR: "Asia", MNE: "Europe", MNG: "Asia", MOZ: "Africa", MRT: "Africa", MUS: "Africa", MWI: "Africa", MYS: "Asia", NAM: "Africa", NER: "Africa", NGA: "Africa", NIC: "North America", NLD: "Europe", NOR: "Europe", NPL: "Asia", NRU: "Oceania", NZL: "Oceania", OMN: "Asia", PAK: "Asia", PAN: "North America", PER: "South America", PHL: "Asia", PLW: "Oceania", PNG: "Oceania", POL: "Europe", PRI: "North America", PRK: "Asia", PRT: "Europe", PRY: "South America", PSE: "Asia", QAT: "Asia", ROU: "Europe", RUS: "Europe", RWA: "Africa", SAU: "Asia", SDN: "Africa", SEN: "Africa", SGP: "Asia", SLB: "Oceania", SLE: "Africa", SLV: "North America", SMR: "Europe", SOM: "Africa", SRB: "Europe", SSD: "Africa", STP: "Africa", SUR: "South America", SVK: "Europe", SVN: "Europe", SWE: "Europe", SWZ: "Africa", SYC: "Africa", SYR: "Asia", TCD: "Africa", TGO: "Africa", THA: "Asia", TJK: "Asia", TKM: "Asia", TLS: "Asia", TON: "Oceania", TTO: "North America", TUN: "Africa", TUR: "Europe", TUV: "Oceania", TWN: "Asia", TZA: "Africa", UGA: "Africa", UKR: "Europe", URY: "South America", USA: "North America", UZB: "Asia", VCT: "North America", VEN: "South America", VNM: "Asia", VUT: "Oceania", WSM: "Oceania", XKX: "Europe", YEM: "Asia", ZAF: "Africa", ZMB: "Africa", ZWE: "Africa", } };4e:T7a8,function combineDataByYear() { const combinedData = { exclLucf: {}, inclLucf: {} }; // Get all years from populationData or emissionsExclLucfData, assuming they have the same years const years = Object.keys(populationData[0]).filter(key => key !== 'Country'); years.forEach(year => { combinedData.exclLucf[year] = []; combinedData.inclLucf[year] = []; populationData.forEach(populationEntry => { const country = populationEntry.Country; if (country === "EUU") return; const population = populationEntry[year]; // Find emissions data for the same country and year const emissionsEntryExclLucf = emissionsExclLucfData.find(entry => entry.Country === country); const emissionsExclLucf = emissionsEntryExclLucf ? emissionsEntryExclLucf[year] : null; const emissionsEntryInclLucf = emissionsInclLucfData.find(entry => entry.Country === country); const emissionsInclLucf = emissionsEntryExclLucf ? emissionsEntryInclLucf[year] : null; // Retrieve the region for the country const region = countryRegionMapping[country] || "Unknown"; const countryName = iso3CountryNameMapping[country] || "Unkown"; // Add country data to combined object for the year if (population !== undefined){ if(emissionsExclLucf !== null) { combinedData.exclLucf[year].push({ country: country, countryName: countryName, region: region, emissions: parseFloat(emissionsExclLucf), population: parseFloat(population) }); } if(emissionsInclLucf !== null) { combinedData.inclLucf[year].push({ country: country, countryName: countryName, region: region, emissions: parseFloat(emissionsInclLucf), population: parseFloat(population) }); } } }); }); return combinedData; }4f:T77d,function legend(container, selmodel) { const titlePadding = 16; // padding between title and entries const entrySpacing = 17; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 5; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const title = container.append('text') .attr('x', 0) .attr('y', 0) .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 'bold') .attr('font-size', '13px') .text('Region'); // The "on" method registers event listeners // We update the selection model in response const entries = container.selectAll('g') .data(regions) .join('g') .attr('transform', d => `translate(0, ${titlePadding + d.index * entrySpacing})`) .on('click', (e, d) => selmodel.toggle(d.label)) // <-- respond to clicks .on('dblclick', () => selmodel.clear()); // <-- respond to double clicks const symbols = entries.append('circle') .attr('cx', entryRadius) // <-- offset symbol x-position by radius .attr('r', entryRadius) .attr('fill', d => color(d.label)); const labels = entries.append('text') .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the left of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '12px') .style('user-select', 'none') // <-- disallow selectable text .text(d => d.label); // Listen to selection model, update symbol and labels upon changes selmodel.on('change.legend', () => { symbols.attr('fill', d => selmodel.has(d.label) ? color(d.label) : '#ccc'); labels.attr('fill', d => selmodel.has(d.label) ? 'black' : '#bbb'); }); }50:T4aa,function sizeLegend(container) { // Append the bold part of the title container.append('text') .attr('x', 0) .attr('y', 0) .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 'bold') .attr('font-size', '13px') .text('Bubble size:'); // Append the normal part of the title, positioned right after the bold part container.append('text') .attr('x', 80) .attr('y', 0) .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 'normal') .attr('font-size', '13px') .text('relative to the contribution to world total of that year and to the zoom factor'); // Append the example description on the next line /*container.append('text') .attr('x', 0) .attr('y', 20) // Adjust the y position to place the text below the first line .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 'normal') .attr('font-size', '12px') .text('e.g. if China\'s contribution to the world total of that year is 20% and Brazil\'s is 10%, then China will be twice as big. Additionally: relative to the zoom factor');*/ }51:T19eb,bubbleZoomChart = { // Specify the chart’s dimensions. const selmodel = SelectionModel(); const marginTop = 25; const marginRight = 50; const marginBottom = 35; const marginLeft = 80; const initYear = 1990; const initEmissionType = 'emissionsExclLucfData' let {data, worldYearTotal, maxEmission } = getFilteredChartData(initEmissionType, initYear); // ---- setting SCALES ---- // Define the horizontal scale. const x = d3.scaleLinear() .domain([0, maxEmission]).nice() .range([marginLeft, width - marginRight]); // Define the vertical scale. const y = d3.scaleLinear() .domain([0, maxPopulation]).nice() .range([height - marginBottom, marginTop]); // radius scale const radiusScale = d3.scaleLinear() .domain([0, worldYearTotal]) .range([4, 60]); // --- CREATE ZOOM const zoom = d3.zoom() .scaleExtent([0.00001, 5000]) .on("zoom", zoomed); // ---- Create the CONTAINER SVG ----- const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add and position the legend; place in the upper right corner. svg.append('g') .attr('transform', `translate(${marginLeft + 40}, 10)`) // Add legend content; call with both container element and selection model. .call(container => legend(container, selmodel)); // <-- invoke legend helper svg.append('g') .attr('transform', `translate(${marginLeft + 190}, 10)`) .call(container => sizeLegend(container)); let countries = svg .selectAll('circle.country') .data(data, d => d.country) .join('circle') .attr('class', 'country') .sort((a, b) => b.emissions - a.emissions) .attr('opacity', 0.75) .attr('fill', d => color(d.region)) .attr('cx', d => x(d.emissions)) .attr('cy', d => y(d.population)) .attr('r', d => radiusScale(parseFloat(d.emissions))); countries .append('title') .text(d => d.countryName + '\n' + d.emissions.toFixed(3) + ' MtCO2'); const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); // --- LABELS ---- const yearLabel = svg.append('text') .attr('class', 'year') .attr('x', width - marginRight - 180) .attr('y', height - marginBottom - 40) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text(initYear); // y-axis label svg.append('g') .attr('transform', `translate(${marginLeft}, 0)`) .append('text') .attr('transform', `translate(20, ${marginTop}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Population'); // x-axis label svg.append('g') .attr('transform', `translate(0, ${height - marginBottom})`) .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '12px') .attr('font-weight', 'bold') .attr('x', width - marginRight) .attr('y', -10) .text('Emissions in MtCo2'); // --- TOOLTIP ---- countries .on('mouseover', function() { d3.select(this).attr('stroke', '#333').attr('stroke-width', 2); }) .on('mouseout', function() { d3.select(this).attr('stroke', null); }); function zoomed({transform}) { const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); // Calculate the maximum value within the visible range of the x-axis let newRadiusScale = calculateRadiusScale(data, transform, maxEmission, worldYearTotal, zx); // Update country circles countries.attr("transform", transform) .attr('r', d => { let radius = parseFloat(d.emissions); if (radius <= 0) { return 0.001; // negative emissions bc of LUCF but still need to show on chart } else { return newRadiusScale(radius); } }) .on('mouseover', function() { d3.select(this).attr('stroke', '#333').attr('stroke-width', 2 / transform.k); }); gx.call(xAxis, zx); gy.call(yAxis, zy); // gGrid.call(grid, zx, zy); } function setYearAndEmissionType(year, emissionType) { yearLabel.text(year); let { data, worldYearTotal, maxEmission } = getFilteredChartData(emissionType, year); countries = countries .data(data, d => d.country) .join( enter => enter.append('circle').attr('class', 'country'), update => update, exit => exit.remove() ); let transform = d3.zoomTransform(svg.node()); let newRadiusScale = calculateRadiusScale(data, transform, maxEmission, worldYearTotal, transform.rescaleX(x).interpolate(d3.interpolateRound)); // Update country circles countries.transition() .duration(300) .ease(d3.easeCubic) .attr('cx', d => x(d.emissions)) .attr('cy', d => y(d.population)) .attr('r', d => { const radius = parseFloat(d.emissions); // needed for including LUCF: if (radius <= 0) { return 0.001; // negative emissions bc of LUCF but still need to show on chart } else { return newRadiusScale(radius) } }) .select('title') // Select title elements .text(d => d.countryName + '\n' + d.emissions.toFixed(3) + ' MtCO2'); // Update text // Update country colors based on selection model countries.attr('fill', d => selmodel.has(d.region) ? color(d.region) : '#010101'); } // Add a selection model listener that updates country colors // We name the event 'change.chart' as this is the chart's own internal listener. // We do not want the name to collide with the listener defined in the legend component. selmodel.on('change.chart', () => { console.log('change chart'); countries.attr('fill', d => selmodel.has(d.region) ? color(d.region) : '#010101') }); return Object.assign(svg.node(), {setYearAndEmissionType, reset(){ svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); } }); }52:[{"id":"06fe4e86110c08861e92f5e77e186461246d4a98ca316374b8c59b95f512dd9e9619c7d6057ef7d66d7d5abba1f4a7cea866eaad7d907c85cad386a3caa76382","href":"https://static.observableusercontent.com/files/06fe4e86110c08861e92f5e77e186461246d4a98ca316374b8c59b95f512dd9e9619c7d6057ef7d66d7d5abba1f4a7cea866eaad7d907c85cad386a3caa76382","name":"historic_emission_excluding_lucf_all_ghg.csv","type":"text/csv","lastModified":1714737143540.097,"size":78391},{"id":"93698ae333b1c3e3cca0be547d7f5116ac847dd05518b14bbcc994b4964a2ffbf46ddcf30efe997d36d1bfed6bcc18bf464f369acf33e696ced33b3dd8425f60","href":"https://static.observableusercontent.com/files/93698ae333b1c3e3cca0be547d7f5116ac847dd05518b14bbcc994b4964a2ffbf46ddcf30efe997d36d1bfed6bcc18bf464f369acf33e696ced33b3dd8425f60","name":"historic_emission_including_lucf_all_ghg.csv","type":"text/csv","lastModified":1714737143540.097,"size":78440},{"id":"98947ffd5ce6683d7851450fb309dbcfe1b17b8feffc6f8ffed80d59b62f7308db89c3b9a0bb70d7ba5351ca599ce5524ce4b1a4103eded47b70b6b34136b45e","href":"https://static.observableusercontent.com/files/98947ffd5ce6683d7851450fb309dbcfe1b17b8feffc6f8ffed80d59b62f7308db89c3b9a0bb70d7ba5351ca599ce5524ce4b1a4103eded47b70b6b34136b45e","name":"iso3CountryNameMapping.json","type":"application/json","lastModified":1714737143540.097,"size":5026},{"id":"e7635269220a91e9abe51e0738ed69dbea7e1609c2e6e1df47169ae12cf1867aa079a6dadb158068386295b84b0437bd9e25faee9f512221ae14e6480ff82b8a","href":"https://static.observableusercontent.com/files/e7635269220a91e9abe51e0738ed69dbea7e1609c2e6e1df47169ae12cf1867aa079a6dadb158068386295b84b0437bd9e25faee9f512221ae14e6480ff82b8a","name":"World_Population_1990-2020.csv","type":"text/csv","lastModified":1714737143540.097,"size":64654}] 49:{"id":"3c2f5ee4d50a0fb5","slug":"zoomable-bubble-chart","title":"Bubble Chart (Emissions in MtCO2)","thumbnail":"0aeec7731e26cf89b86af7c66c22d0732a55d349becf52c3f300e280f2d6674b","access_level":"public","create_time":"$D2024-05-03T11:52:23.540Z","update_time":"$D2024-05-20T12:38:10.199Z","view_time":null,"first_public_time":"$D2024-05-06T18:38:26.965Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":1156,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"df36db0dcd29931e","login":"hanna-rodler","name":"Hanna Rodler","avatar_url":"https://avatars-next.observableusercontent.com/0e2f8c94e6fbd5d2080ace4e17eac5354f9a30705f7dfe997dec4d95f12a1845","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"},{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bubble Chart (Emissions in MtCO2)","cells":[{"id":0,"value":"# Bubble Chart (Emissions in MtCO2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"emissionsExclLucfData = // Load the CSV data\nFileAttachment(\"historic_emission_excluding_lucf_all_ghg.csv\").csv().then(data => {\n // Filter out \"EUU\" and \"WORLD\" countries\n return data.filter(d => d.Country !== \"EUU\" && d.Country !== \"WORLD\");\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"emissionsInclLucfData = // Load the CSV data\nFileAttachment(\"historic_emission_including_lucf_all_ghg.csv\").csv().then(data => {\n // Filter out \"EUU\" and \"WORLD\" countries\n return data.filter(d => d.Country !== \"EUU\" && d.Country !== \"WORLD\");\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"populationData = (await FileAttachment(\"World_Population_1990-2020.csv\").csv())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"worldTotalPerYearExclLucf = \n FileAttachment(\"historic_emission_excluding_lucf_all_ghg.csv\").csv().then(data => {\n let worldData = data.filter(d => d.Country === \"WORLD\");\n return worldData[0]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"worldTotalPerYearInclLucf = \n FileAttachment(\"historic_emission_including_lucf_all_ghg.csv\").csv().then(data => {\n let worldData = data.filter(d => d.Country === \"WORLD\");\n return worldData[0]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"iso3CountryNameMapping = FileAttachment(\"iso3CountryNameMapping.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function findMaxNumber(dataSet) {\n const max = d3.max(dataSet, entry => {\n const values = Object.values(entry);\n const numericValues = values.map(value => parseFloat(value));\n return d3.max(numericValues);\n });\n\n return max;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"maxPopulation = findMaxNumber(populationData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"combinedData = combineDataByYear();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"function getFilteredChartData(emissionType, year) {\n if(emissionType === 'emissionsInclLucfData') {\n return {\n data: combinedData.inclLucf[year],\n worldYearTotal: parseFloat(worldTotalPerYearInclLucf[year]),\n maxEmission: findMaxNumber(emissionsInclLucfData)\n };\n } else {\n return {\n data: combinedData.exclLucf[year],\n worldYearTotal: parseFloat(worldTotalPerYearExclLucf[year]),\n maxEmission: findMaxNumber(emissionsExclLucfData)\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"color = d3.scaleOrdinal()\n .domain(Object.values(countryRegionMapping))\n .range(d3.schemeDark2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"regions = [\n { index: 0, label: 'Oceania' },\n { index: 1, label: 'Asia' },\n { index: 2, label: 'Africa' },\n { index: 3, label: 'Europe' },\n { index: 4, label: 'South America' },\n { index: 5, label: 'North America' },\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"// Our selection model wraps two components:\n// - A JavaScript Set for tracking the selected elements\n// - A D3 dispatch helper for registering and invoking listener callbacks upon changes\nfunction SelectionModel(values) {\n const dispatch = d3.dispatch('change');\n const state = new Set(values);\n \n const api = {\n on: (type, fn) => (dispatch.on(type, fn), api),\n clear: () => (clear(), api),\n has: value => !state.size || state.has(value),\n set: value => (update(value, true), api),\n toggle: value => (update(value, !state.has(value)), api)\n };\n \n function clear() {\n if (state.size) {\n state.clear();\n dispatch.call('change', api, api);\n }\n }\n \n function update(value, add) {\n if (add && !state.has(value)) {\n state.add(value);\n dispatch.call('change', api, api);\n } else if (!add && state.has(value)) {\n state.delete(value);\n dispatch.call('change', api, api);\n }\n }\n\n return api;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"marginBottom = 35;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"marginLeft = 80;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"bubbleZoomChart.setYearAndEmissionType(yearZoomDynamic, emissionType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"Emissions per country in MtCO2. Circle size correspondant to contribution to world total of that year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"viewof emissionType = Inputs.radio(new Map([[\"excluding LUCF\", \"emissionsExclLucfData\"],[\"including LUCF\", \"emissionsInclLucfData\"]]), {value: \"emissionsExclLucfData\", label: \"Emissions\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"viewof yearZoomDynamic = Scrubber(\n d3.range(1990, 2020+1, 1), // min to max years in 5 year increments\n { autoplay: false, delay: 300, loop: false } // experiment with these settings!\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"viewof reset = html`