A simple visualization illustrtion the 100-year Global Warming Potential for carbon dioxide (CO2), methane (CH4), and nitrous oxide (N20).
Last active
January 8, 2016 22:13
-
-
Save mtaptich/8f8c955a7bcaa3ac2b2f to your computer and use it in GitHub Desktop.
100-yr GWP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| body { | |
| width: 1024px; | |
| margin-top: 0; | |
| margin: auto; | |
| font-family: "Lato", "PT Serif", serif; | |
| color: #222222; | |
| padding: 0; | |
| font-weight: 300; | |
| line-height: 33px; | |
| font-size: 28px; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .co2{ | |
| fill-opacity: 0.4; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = { top: 40, right: 10, bottom: 50, left: 10 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 400 - margin.top - margin.bottom, | |
| pace = 50, | |
| co2toco2 = 1, | |
| methanetoco2 = 28, | |
| n2otoco2 = 298; | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
| svg.append('text') | |
| .attr('y', height + margin.bottom*0.8) | |
| .attr('x', width*0.2) | |
| .style('text-anchor', 'middle') | |
| .text('Carbon Dioxide') | |
| svg.append('text') | |
| .attr('y', height + margin.bottom*0.8) | |
| .attr('x', width*0.5) | |
| .style('text-anchor', 'middle') | |
| .text('Methane') | |
| svg.append('text') | |
| .attr('y', height + margin.bottom*0.8) | |
| .attr('x', width*0.8) | |
| .style('text-anchor', 'middle') | |
| .text('Nitrous Oxide') | |
| function co2(){ | |
| var c = svg.append('circle') | |
| .attr('cy', function(d){ return height - 10*Math.random()}) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.2}) | |
| .attr('r', function(d){ return 3}) | |
| .attr('class', 'co2') | |
| c.transition() | |
| .duration(5000+0.5*pace*n2otoco2) | |
| .attr('cy', height*0.5) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.2}) | |
| .ease('linear') | |
| .transition() | |
| .duration(5000+0.5*pace*n2otoco2) | |
| .attr('cy', 10) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.2}) | |
| .ease('linear') | |
| .each("end", function(){ d3.select(this).remove()}); | |
| } | |
| function methane(){ | |
| var mcount = 0 | |
| minterval = setInterval(function(){ | |
| var c = svg.append('circle') | |
| .attr('cy', function(d){ return height - 10*Math.random() }) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.5}) | |
| .attr('r', function(d){ return 3}) | |
| .attr('class', 'co2') | |
| c.transition() | |
| .duration(5000) | |
| .attr('cy', height*0.5) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.5}) | |
| .ease('linear') | |
| .transition() | |
| .duration(5000) | |
| .attr('cy', 10) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.5}) | |
| .ease('linear') | |
| .each("end", function(){ d3.select(this).remove()}); | |
| mcount+=1; | |
| if (mcount>methanetoco2) clearInterval(minterval) | |
| },pace*n2otoco2/methanetoco2) | |
| } | |
| function nitrousoxide(){ | |
| var ncount = 0 | |
| ninterval = setInterval(function(){ | |
| var c = svg.append('circle') | |
| .attr('cy', function(d){ return height - 10*Math.random() }) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.8}) | |
| .attr('r', function(d){ return 3}) | |
| .attr('class', 'co2') | |
| c.transition() | |
| .duration(5000) | |
| .attr('cy', height*0.5) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.8}) | |
| .ease('linear') | |
| .transition() | |
| .duration(5000) | |
| .attr('cy', 10) | |
| .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -1 : 1) + width*0.8}) | |
| .ease('linear') | |
| .each("end", function(){ d3.select(this).remove()}); | |
| ncount+=1; | |
| if (ncount>n2otoco2) clearInterval(ninterval) | |
| },pace) | |
| } | |
| function emit(){ | |
| nitrousoxide() | |
| methane() | |
| co2() | |
| } | |
| emit() | |
| var emissions = setInterval(emit, 10000+pace*n2otoco2) | |
| d3.select(self.frameElement).style("height", (height + margin.top + margin.bottom) + "px"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment