3e:null 3f:["$","title",null,{"children":"Compensation to be paid and to be received | huzaifazoom | Observable"}] 45:T48c,html_struct2 = { return html `

` }46:T5462,chart = ( { margin: ({ top: 20, right: 10, bottom: 60, left: 80 }), width: width, svgWidth: width, height: 0, svgHeight: 0, yTicks: 10, padding: 10, mode: 1, colors: { "Undershooters": '#50C878', "Overshooters": '#C70039' }, doughnut_obs_target: '/', doughnut_leeds_target: '/atmospheric-appropriation/', doughnut_target: null, listMousemove: function (e, d) { var circle = d3.select(`#circle_${d.iso3c}`); if (circle.size() > 0) { this.shadowCircles(circle.node(0), d); } console.log(circle.node(0).__data()); }, listMouseout: function () { this.shadowCircles(null); }, shadowCircles: function (circle, data) { const Self = this; const formater = d3.format(',d'); d3.select("#chart") .selectAll("circle") .transition() .duration(300) .style("stroke", function () { if (!circle || circle === this) { return "#333"; } else { return "#ccc"; } }) .style("fill", function () { if (!circle || circle === this) { return d3.select(this).attr('data-color'); } else { return "transparent"; } }) ; if (circle != null) { let svg = d3.select("#mySVG").node(0); this.tooltip.html('' + data.country + '
Emissions: ' + data.series[Self.mode].overshoot15C + ' times its fair share
Compensation: $ ' + formater(data.series[Self.mode].compensationPerCap) +' per capita'); let boundingTooltip = this.tooltip.node(0).getBoundingClientRect(); let boundingChart = svg.getBoundingClientRect(); let boundingCircle = circle.getBoundingClientRect(); let d3circle = d3.select(circle); const cx = d3circle.attr("cx") * 1; const cy = d3circle.attr("cy") * 1; const cr = d3circle.attr("r") * 1; const pt = svg.createSVGPoint(); pt.x = cx; pt.y = cy; let ptx = pt.matrixTransform(svg.getScreenCTM()); this.tooltip .style("top", (boundingCircle.y - boundingChart.y - boundingTooltip.height - 5) + "px") .style("left", `${boundingCircle.x + 15 + ((boundingCircle.width - boundingTooltip.width) / 2) - boundingChart.x}px`) .style("opacity", 0) ; this.tooltip.transition() .duration(200) .style("opacity", 0.9); } else { this.tooltip.html(""); } }, circleMouseover: function (e, d) { var circle = e.target; this.shadowCircles(circle, d); }, circleMouseout: function () { this.shadowCircles(null); }, prepareData: function (data) { var Self = this; var xs = []; var ys = []; data.forEach(function (d) { if (Self.mode === 1) { d.x = Self.xScale(d.series[1].overshoot15C); d.y = Self.yScale(d.series[1].compensationPerCap); d.group = d.series[1].type; } else { if(Self.mode === 0){ d.x = Self.xScale(d.series[0].overshoot15C); d.y = Self.yScale(d.series[0].compensationPerCap); d.group = d.series[0].type; } else { d.x = Self.xScale(d.series[2].overshoot15C); d.y = Self.yScale(d.series[2].compensationPerCap); d.group = d.series[2].type; } } d.radius = Self.rScale(d.population); }); }, plot: function () { const Self = this; if (document.location.host === 'goodlife.leeds.ac.uk') { this.doughnut_target = this.doughnut_leeds_target; } else { this.doughnut_target = this.doughnut_obs_target; } this.width = 700 - this.margin.left - this.margin.right; this.svgWidth = this.width + this.margin.left + this.margin.right; this.height = 500 - this.margin.top - this.margin.bottom; this.svgHeight = this.height + this.margin.top + this.margin.bottom; d3.select("#list").text("") var listContainer = d3.select("#list") .append("ul") .attr("class", "myUl") .attr("class", "list-group") .style("max-height", "440px") .style("overflow", "hidden") .style("overflow-y", "scroll") .style("border", "1px solid #333") ; listContainer.selectAll("li") .data(countries) .enter().append("li") .attr("class", "list-group-item") .attr("value", d => d.iso3c) .append("a") .attr("href", d => "javascript:") .text(d => d.country) .on("mousemove", function (e, d) { Self.listMousemove(e, d); }) .on("mouseout", function (e, d) { Self.listMouseout(e, d); }) .on("focus", function (e, d) { Self.listMousemove(e, d); }) .on("blur", function (e, d) { Self.listMouseout(e, d); }) ; this.xScale = d3.scaleLinear().range([0, this.width]); this.yScale = d3.scaleLinear().range([this.height, 0]); this.rScale = d3.scaleSqrt().range([1, 35]); this.xAxisTop = d3.axisTop(this.xScale).ticks(0); this.xAxisBottom = d3.axisBottom(this.xScale).ticks(5); this.yAxisLeft =d3.axisLeft(this.yScale).ticks(5) this.yAxisRight = d3.axisRight(this.yScale).ticks(0); d3.select("#chart").text("") const svgContainer = d3.select("#chart") .append("svg") .attr("id", "mySVG") .attr("viewBox", "0 0 " + this.svgWidth + " " + this.svgHeight) .attr("width", this.svgWidth) .attr("height", this.svgHeight) .style("fill", "white") ; const g = svgContainer.append("g") //const handleZoom = (e) => g.attr('transform', e.transform); //const zoom = d3.zoom().on('zoom', handleZoom); //d3.select("svg").call(zoom); this.tooltip = d3.select("#chart") .append("div") .attr("class", "chart_tooltip") .style("position", "absolute") .style("width", "auto") .style("height", "auto") .style("text-align", "center") .style("padding", "0") .style("font-family", "sans-serif") .style("font-size", "0.8em") .style("border", "0px") .style("opacity", 0) ; const xExtent = d3.extent(data, function (d) { if (Self.mode === 1) { return d.series[1].overshoot15C; } else { if (Self.mode === 0) { return d.series[0].overshoot15C; } else { return d.series[2].overshoot15C; } } }); const xRange = Math.ceil(xExtent[1] - xExtent[0]); this.xScale.domain([xExtent[0] - (xRange * 0.1), xExtent[1] + (xRange * 0.1)]); const yExtent = d3.extent(data, function (d) { if (Self.mode === 1) { return d.series[1].compensationPerCap; } else { if (Self.mode === 0) { return d.series[0].compensationPerCap; } else { return d.series[2].compensationPerCap; } } }); const yRange = Math.ceil((yExtent[1] - yExtent[0]) * 10) / 10; if (this.mode === 1) { this.yScale.domain([yExtent[0] - (yRange * 0.08), yExtent[1] + (yRange * 0.08)]); } else { this.yScale.domain([yExtent[0] - (yRange * 0.16), yExtent[1] + (yRange * 0.14)]); } this.rScale.domain( [ d3.min(data, function (d) { return d.population; }), d3.max(data, function (d) { return d.population; }) ] ).nice(); this.prepareData(data); let bubbleData = data.sort(function(x,y){ return d3.descending(x.population, y.population); }); g.append("g") .attr("transform", "translate(" + this.margin.left + "," + (this.height + this.margin.top) + ")") .style("fill", "none") .style("stroke", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .style("font-size", "0.8em") .style("line-height", "100%") .call(this.xAxisBottom) .append("text") .attr("x", (this.width / 2)) .attr("y", 40) .style("text-anchor", "middle") .style("fill", "#333") .text("Cumulative extent of 1.5°C overshoot in 2050, net zero scenario (1 = fair share)"); g.append("g") .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")") .style("fill", "none") .style("stroke", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .call(this.xAxisTop) ; g.append("g") .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")") .style("fill", "none") .style("stroke", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .style("font-size", "0.8em") .style("line-height", "100%") .call(this.yAxisLeft) .append("text") .attr("transform", "rotate(-90)") .attr("x", (-this.height / 2)) .attr("y", (-this.margin.left * 5 / 6)) .style("text-anchor", "middle") .style("fill", "#333") .text("Annual compensation per capita, net zero scenario (constant 2010 $)"); g.append("g") .attr("transform", "translate(" + (this.width + this.margin.left) + "," + this.margin.top + ")") .style("fill", "none") .style("stroke", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .call(this.yAxisRight) ; const gridGroup = g.append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")"); gridGroup.append("line") .attr("stroke", "#ccc") .attr("stroke-width", "2px") .attr("stroke-dasharray", "10 5") .attr("x1", 0) .attr("x2", this.width) .attr("y1", this.yScale(0)) .attr("y2", this.yScale(0)) ; gridGroup.append("line") .attr("stroke", "#ccc") .attr("stroke-width", "2px") .attr("stroke-dasharray", "10 5") .attr("x1", this.xScale(1)) .attr("x2", this.xScale(1)) .attr("y1", 0) .attr("y2", this.height) ; gridGroup.append("text") .attr("x", this.xScale(0.2)) .attr("y", -5) .attr("fill", "#666") .attr("text-anchor", "middle") .style("font-family", "sans-serif") .style("font-size", "0.8em") .text("Entitled to receive") ; gridGroup.append("text") .attr("x", this.xScale(3.75)) .attr("y", -5) .attr("fill", "#666") .attr("text-anchor", "middle") .style("font-family", "sans-serif") .style("font-size", "0.8em") .text("Liable to pay") ; const circleGroup = g.append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")"); this.circles = circleGroup.selectAll("circle") .data(bubbleData) .enter() .append("a") .attr("tabindex", "-1") .attr("xlink:href", function (d) { return `${Self.doughnut_target}#${d.iso3c}`; }) .text(function (d) { return d.country; }) .append("circle") .attr("id", d => `circle_${d.iso3c}`) .attr("cx", function (d) { if (Self.mode === 1) { return Self.xScale(d.series[1].overshoot15C); } else { if (Self.mode === 0){ return Self.xScale(d.series[0].overshoot15C); } else { return Self.xScale(d.series[2].overshoot15C); } } }) .attr("cy", function (d) { if (Self.mode === 1) { return Self.yScale(d.series[1].compensationPerCap); } else { if (Self.mode === 0){ return Self.yScale(d.series[0].compensationPerCap); } else { return Self.yScale(d.series[2].compensationPerCap); } } }) .attr("r", function (d) { return Self.rScale(d.population); }) .style("stroke", "#333") .style("fill-opacity", 0.5) .style("fill", function (d) { return Self.colors[d.group]; }) .attr("data-color", function (d) { return Self.colors[d.group]; }) .on("mouseover", function (e, d) { Self.circleMouseover(e, d); }) .on("mouseout", function (e, d) { Self.circleMouseout(e, d); }) ; const force = d3.forceSimulation(data) .on("tick", this.forceTick()) .force("charge", d3.forceManyBody().strength(-0.5)) .force("collide", d3.forceCollide(0)) .alpha(0) .alphaTarget(0) ; d3.select("#detectOverlap").on("change", function () { if (this.checked) { force.force("collide", d3.forceCollide(14).strength(0.7).radius(d => d.radius + 3)); } else { force.force("collide", d3.forceCollide(0)); } force.alpha(1); force.alphaTarget(0); force.restart(); }); d3.select("#chartMode").on("input", function () { switch (this.value) { case 'start1960': Self.mode = 1; Self.plot(); break; case 'start1850': Self.mode = 0; Self.plot(); break; case 'start1992': Self.mode = 2; Self.plot(); break; } }); return this; }, forceTick: function () { var Self = this; return function () { Self.circles.each(Self.moveTowardDataPosition(this.alpha())); Self.circles.attr("cx", d => d.x).attr("cy", d => d.y); }; }, moveTowardDataPosition: function (alpha) { var Self = this; return function (d) { if (Self.mode === 1) { d.x += (Self.xScale(d.series[1].overshoot15C) - d.x) * 0.1 * alpha; d.y += (Self.yScale(d.series[1].compensationPerCap) - d.y) * 0.1 * alpha; } else { if (Self.mode === 0) { d.x += (Self.xScale(d.series[0].overshoot15C) - d.x) * 0.1 * alpha; d.y += (Self.yScale(d.series[0].compensationPerCap) - d.y) * 0.1 * alpha; } else { d.x += (Self.xScale(d.series[2].overshoot15C) - d.x) * 0.1 * alpha; d.y += (Self.yScale(d.series[2].compensationPerCap) - d.y) * 0.1 * alpha; } } }; } } ) .plot();47:[{"id":"eddf95e3f844405e9c74eb514de5cc05dfeec8cc5cc79f1e902e80419cd339a4b4a8b50c31f2a3ee90bff082d243b258785fb503e64dc6d526b7af43ba873567","href":"https://static.observableusercontent.com/files/eddf95e3f844405e9c74eb514de5cc05dfeec8cc5cc79f1e902e80419cd339a4b4a8b50c31f2a3ee90bff082d243b258785fb503e64dc6d526b7af43ba873567","name":"1_BubbleData-perCapitaCompensation@5.json","type":"application/json","lastModified":1691408730552.282,"size":113249},{"id":"2602234fe426b6f9eadf4e8faad8960c75e9c4dd69259e5c8a9dfa1872d2ba560ed85f99b870f267018ab7fa83f6c9d46527ad550238305ed22bd6f7deacc068","href":"https://static.observableusercontent.com/files/2602234fe426b6f9eadf4e8faad8960c75e9c4dd69259e5c8a9dfa1872d2ba560ed85f99b870f267018ab7fa83f6c9d46527ad550238305ed22bd6f7deacc068","name":"1_CountryList@1.json","type":"application/json","lastModified":1691408730552.282,"size":113440}] 43:{"id":"08fcd980c3cd20d9","slug":null,"title":"Compensation to be paid and to be received","thumbnail":"50e6b00a6f1ff4065e004a9493ffb2536db6e9530ad4daf957feba42049df4db","access_level":"public","create_time":"$D2023-08-07T11:45:30.552Z","update_time":"$D2023-09-30T09:19:56.398Z","view_time":null,"first_public_time":"$D2023-08-07T11:45:30.552Z","has_unpublished_edits":null,"fork":{"id":"162be9a329738b2a","slug":null,"title":"Untitled","owner":{"id":"ce9094331216f114","login":"goodlife4allwithinpbs","name":"Goodlife4all WithinPBs"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2e304d7f0ac12982","login":"huzaifazoom","name":"","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":192,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"449d8f37b1831ce1","login":"huzaifazoom","name":"","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"449d8f37b1831ce1","login":"huzaifazoom","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Compensation to be paid and to be received","cells":[{"id":0,"value":"# Compensation to be paid and to be received","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data = FileAttachment(\"1_BubbleData-perCapitaCompensation@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"countries = FileAttachment(\"1_CountryList@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"