Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Created February 27, 2020 21:52
Show Gist options
  • Save tomshanley/2d5b4665fbbe7c65d09131a524baa1ee to your computer and use it in GitHub Desktop.
Save tomshanley/2d5b4665fbbe7c65d09131a524baa1ee to your computer and use it in GitHub Desktop.
Download ZIP
example
Raw
.block
license: mit
Raw
data.csv
thing co2e scale source url
Producing 10kg of wheat 0.01 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
Two-hour drive (medium-sized gasoline car) 0.03 Kg Map My Emissions https://mapmyemissions.com/home
Producing 10kg of rice 0.04 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
Burundi per capita emissions 2017 0.05 Kg OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Producing 10kg of farmed fish 0.05 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
Producing 10kg of chicken 0.06 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
Producing 10kg of pork 0.07 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
Producing 10kg of coffee 0.17 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
Producing 10kg of cheese 0.21 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
London -> Rome return flight 0.23 Kg Guardian https://www.theguardian.com/environment/ng-interactive/2019/jul/19/carbon-calculator-how-taking-one-flight-emits-as-much-as-many-people-do-in-a-year
Producing 10kg of beef 0.60 Kg OWID https://ourworldindata.org/food-choice-vs-eating-local
London -> New York return flight 0.99 Kg Guardian https://www.theguardian.com/environment/ng-interactive/2019/jul/19/carbon-calculator-how-taking-one-flight-emits-as-much-as-many-people-do-in-a-year
London -> Los Angeles return flight 1.65 tonnes Guardian https://www.theguardian.com/environment/ng-interactive/2019/jul/19/carbon-calculator-how-taking-one-flight-emits-as-much-as-many-people-do-in-a-year
London -> Perth return flight 3.15 Tonnes Guardian https://www.theguardian.com/environment/ng-interactive/2019/jul/19/carbon-calculator-how-taking-one-flight-emits-as-much-as-many-people-do-in-a-year
Global per capital emissions 2017 4.80 Tonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
UK per capita emissions 2017 5.81 Tonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
China per capita emissions 2017 6.98 Tonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
US per capita emissions 2017 16.20 Tonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Qatar per capita emissions 2017 49.00 Tonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Clothes bought every minute in the UK 50.00 Tonnes Oxfam https://oxfamapps.org.uk/shop-blog/sustainable-fashion/new-shocking-facts-about-the-impact-of-fast-fashion-on-our-climate/
Having a child 58.60 Tonnes Science Magazine https://www.sciencemag.org/news/2017/07/best-way-reduce-your-carbon-footprint-one-government-isn-t-telling-you-about
500 passenger vehicle annual emissions 2314 Ktonnes EPA https://www.epa.gov/energy/greenhouse-gas-equivalencies-calculator
30 min drive every workday of a year (200 days) 11720 Ktonnes Map My Emissions https://mapmyemissions.com/home
100,000 barrels of oil 43000 Ktonnes EPA https://www.epa.gov/energy/greenhouse-gas-equivalencies-calculator
LHC carbon footprint 200000 Ktonnes C&EN https://cen.acs.org/environment/greenhouse-gases/Scientists-CERN-hunt-greener-gases/97/i17
Energy use of 29,000 US homes 250000 Ktonnes EPA https://www.epa.gov/energy/greenhouse-gas-equivalencies-calculator
Music streaming emissions 2016 275000 Ktonnes University of Glasgow https://www.gla.ac.uk/news/archiveofnews/2019/april/headline_643297_en.html
Burundi total emissions 2017 529140 Ktonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
36,000 trucks of waste going to landfill 750000 Ktonnes EPA https://www.epa.gov/energy/greenhouse-gas-equivalencies-calculator
UK total coffee consumption 1920116 Mtonnes New Food Magazine https://www.newfoodmagazine.com/news/22349/coffee-consumption-in-the-uk/
Netherlands total coffee consumption 1956802 Mtonnes New Food Magazine https://www.newfoodmagazine.com/news/22349/coffee-consumption-in-the-uk/
Burundi total emissions 1751-2017 10730000 Mtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Apple Inc carbon footprint 2018 25200000 Mtonnes Apple https://www.apple.com/environment/pdf/Apple_Environmental_Responsibility_Report_2019.pdf
Amazon Inc carbon footprint 2018 44400000 Mtonnes Amazon https://sustainability.aboutamazon.com/carbon-footprint
New York City Emissions 2016 52000000 Mtonnes City of New York https://www1.nyc.gov/assets/sustainability/downloads/pdf/publications/GHG%20Inventory%20Report%20Emission%20Year%202016.pdf
Qatar total emissions 2017 129800000 Mtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
World railways carbon emissions 2015 259000000 Mtonnes ECOFYS https://www.asnbank.nl/web/file?uuid=9a2d8d08-5282-4380-a56a-e10940348eb5&owner=6916ad14-918d-4ea8-80ac-f71f0ff1928e&contentid=1267
UK total emissions 2017 384700000 Mtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Commercial aviation emissions 2018 918000000 Mtonnes ICCT https://theicct.org/publications/co2-emissions-commercial-aviation-2018
Global Shipping Industry 961000000 Mtonnes IMO http://www.imo.org/en/OurWork/Environment/PollutionPrevention/AirPollution/Pages/Greenhouse-Gas-Studies-2014.aspx
Total cement emissions 2017 1480000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Qatar total emissions 1751-2017 1880000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
How much CO2 humans exhale per year 3000000000 Gtonnes Slate https://slate.com/news-and-politics/2009/08/are-you-heating-the-planet-when-you-breathe.html
USA total emissions 2017 5300000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Total food emissions 2015 5570000000 Gtonnes XCAR https://exponentialroadmap.org/wp-content/uploads/2018/09/Exponential-Climate-Action-Roadmap-September-2018.pdf
Total energy emissions 2015 5900000000 Gtonnes XCAR https://exponentialroadmap.org/wp-content/uploads/2018/09/Exponential-Climate-Action-Roadmap-September-2018.pdf
Total agriculture & forestry emissions 2015 6576000000 Gtonnes XCAR https://exponentialroadmap.org/wp-content/uploads/2018/09/Exponential-Climate-Action-Roadmap-September-2018.pdf
Total gas emissions 2017 7210000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Global Wildfires 2019 7800000000 Gtonnes Bloomberg https://www.bloomberg.com/graphics/2020-fire-emissions/
Total transport emissions 2015 8400000000 Gtonnes XCAR https://exponentialroadmap.org/wp-content/uploads/2018/09/Exponential-Climate-Action-Roadmap-September-2018.pdf
Total buildings emissions 2015 9700000000 Gtonnes XCAR https://exponentialroadmap.org/wp-content/uploads/2018/09/Exponential-Climate-Action-Roadmap-September-2018.pdf
China total emissions 2017 9800000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Total oil emissions 2017 12640000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Total coal emissions 2017 14570000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Total industry emissions 2015 16900000000 Gtonnes XCAR https://exponentialroadmap.org/wp-content/uploads/2018/09/Exponential-Climate-Action-Roadmap-September-2018.pdf
Global emissions 2017 53500000000 Gtonnes IPCC https://www.ipcc.ch/site/assets/uploads/2018/12/UNEP-1.pdf
UK total emissions 1751-2017 77070000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
China total emissions 1751-2017 200140000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
US total emissions 1751-2017 399380000000 Gtonnes OWID https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body {
background-color: #e5e5e3;
align-content: center;
color: #201f3a;
font-family: "Merriweather", Georgia;
margin: 20px;
}
#main {
margin: 0 auto;
max-width: 400px;
}
h1 {
font-family: "Oswald";
font-size: 320%;
}
a {
color: #ff7473;
}
circle {
opacity: 30%;
fill: #201f3a;
}
</style>
</head>
<svg id="chart" width="1000" height="1000"></svg>
<body>
<script>
console.clear()
// Get chart size
const margin = {
top: 20,
right: 20,
bottom:0,
left: 100};
const svg = d3.select("#chart")
const width = +svg.attr("width");
const height = +svg.attr("height");
const innerWidth = width - margin.left - margin.right
const innerHeight = height - margin.top - margin.bottom
const gutter = 50; // gutter between charts
// Define my different scales
const circleScale = d3.scaleSqrt().domain([0,1000000000000]).range ([1, 100]);
const scales = [
{"name": "Kg",
"low": 0,
"high": 1},
{"name": "Tonnes",
"low": 0,
"high": 1000},
{"name": "Ktonnes",
"low": 0,
"high": 1000000},
{"name": "Mtonnes",
"low": 0,
"high": 1000000000},
{"name": "Gtonnes",
"low": 0,
"high": 1000000000000}]
// Set the domains for the scales
for (let i=0; i < scales.length; i++) {
const scale = d3.scaleLinear().domain([scales[i].low, scales[i].high]);
scales[i].scale = scale;
}
// Main chart-drawing function
function drawchart(error, data) {
console.log(scales)
// Save some repetition later.
for (i = 0; i < scales.length; i++) {
const chartHeight = innerHeight/scales.length;
const toPlot = scales[i].data;
const scale = scales[i].scale
.range([0, chartHeight - gutter]);
// Add a group that'll contain the axis
svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top + (i*chartHeight)})`)
.attr("id", `${scales[i].name}-chart`);
const chart = d3.select(`#${scales[i].name}-chart`);
// Plot the axis
const axis = chart.append("g")
.call(d3.axisLeft(scale))
.attr("class", "axis")
.attr("id", `${scales[i].name}`);
// Label each chart with scale name
chart.append("text")
.text(scales[i].name)
.style("text-anchor","end")
.style("font-size", "70%")
.style("font-weight", "bold")
.attr("transform",`translate(-28,3)`);
// Debug logging - DELETE ME
console.log(scales[i].name);
console.log(toPlot);
// Plot the data
const circles = chart.selectAll("circle")
.data(toPlot)
.enter()
.append("circle")
.attr("cx", 0)
.attr("cy", d => scale(d.co2e))
.attr("r", 20);
// Plot the labels
const text = chart.selectAll(".label")
.data(toPlot)
.enter()
.append("text");
text.attr("x", 50)
.attr("y", d => scale(d.co2e))
.text(d => d.thing)
.style("font-size", "70%");
console.log(text);
}
};
// Load the data, then run the chart-drawing function
d3.csv("data.csv").then(data => {
// Turn the numbers from strings into numbers
data.forEach(d => {d.co2e = +d.co2e});
// Filter the data for each scale and store it in the scales object
for (let i=0; i < scales.length; i++) {
const filteredData = data.filter(datapoint => datapoint["scale"] == scales[i].name)
scales[i].data = filteredData;
}
// Run the drawchart function
drawchart(data);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment