Skip to content

Instantly share code, notes, and snippets.

@sajudson
Last active September 27, 2017 02:14
Show Gist options
  • Save sajudson/cf7c08c3538c3cfe78abebb77fd06f98 to your computer and use it in GitHub Desktop.
Save sajudson/cf7c08c3538c3cfe78abebb77fd06f98 to your computer and use it in GitHub Desktop.
Global Carbon Emissions Area Chart
license: mit
border: no
node_modules
package-lock.json
time_series.csv

A stacked area chart visualization of global carbon emssions from 1751 to 2014, providing a breakdown by source (combustion of fossil fuels by type - gas, liquid, and solid, cement manufacturing, and gas flaring) from 1751 through 2014. Similar to the stream graph, this is easier to interpret quanititatively.

This data was compiled by the Carbon Dioxide Information Analysis Center

The original electronic file is Global CO2 Emissions from fossil fuel buring, cement manufacturing, and gas flaring/ This file was imported into excel and saved as a CSV file.

Note that CDIAC is shutting down on September 30, 2017. This data will be transferred to the LBNL ESS-DIVE web site after September, 30, 2017.

The link to the CDIAC website was found on gapminder, which contains other data sources that may be of interest if this data set is used for my visualization project.

Uses d3-area-label to position labels.

forked from curran's block: How Americans Spend Time

forked from sajudson's block: Global Carbon Emissions Streamgraph

Year Total Gas Liquids Solids Cement Flaring CarbonPerCapita Population
1751 3 0 0 3 0 0
1752 3 0 0 3 0 0
1753 3 0 0 3 0 0
1754 3 0 0 3 0 0
1755 3 0 0 3 0 0
1756 3 0 0 3 0 0
1757 3 0 0 3 0 0
1758 3 0 0 3 0 0
1759 3 0 0 3 0 0
1760 3 0 0 3 0 0
1761 3 0 0 3 0 0
1762 3 0 0 3 0 0
1763 3 0 0 3 0 0
1764 3 0 0 3 0 0
1765 3 0 0 3 0 0
1766 3 0 0 3 0 0
1767 3 0 0 3 0 0
1768 3 0 0 3 0 0
1769 3 0 0 3 0 0
1770 3 0 0 3 0 0
1771 4 0 0 4 0 0
1772 4 0 0 4 0 0
1773 4 0 0 4 0 0
1774 4 0 0 4 0 0
1775 4 0 0 4 0 0
1776 4 0 0 4 0 0
1777 4 0 0 4 0 0
1778 4 0 0 4 0 0
1779 4 0 0 4 0 0
1780 4 0 0 4 0 0
1781 5 0 0 5 0 0
1782 5 0 0 5 0 0
1783 5 0 0 5 0 0
1784 5 0 0 5 0 0
1785 5 0 0 5 0 0
1786 5 0 0 5 0 0
1787 5 0 0 5 0 0
1788 5 0 0 5 0 0
1789 5 0 0 5 0 0
1790 5 0 0 5 0 0
1791 6 0 0 6 0 0
1792 6 0 0 6 0 0
1793 6 0 0 6 0 0
1794 6 0 0 6 0 0
1795 6 0 0 6 0 0
1796 6 0 0 6 0 0
1797 7 0 0 7 0 0
1798 7 0 0 7 0 0
1799 7 0 0 7 0 0
1800 8 0 0 8 0 0
1801 8 0 0 8 0 0
1802 10 0 0 10 0 0
1803 9 0 0 9 0 0
1804 9 0 0 9 0 0
1805 9 0 0 9 0 0
1806 10 0 0 10 0 0
1807 10 0 0 10 0 0
1808 10 0 0 10 0 0
1809 10 0 0 10 0 0
1810 10 0 0 10 0 0
1811 11 0 0 11 0 0
1812 11 0 0 11 0 0
1813 11 0 0 11 0 0
1814 11 0 0 11 0 0
1815 12 0 0 12 0 0
1816 13 0 0 13 0 0
1817 14 0 0 14 0 0
1818 14 0 0 14 0 0
1819 14 0 0 14 0 0
1820 14 0 0 14 0 0
1821 14 0 0 14 0 0
1822 15 0 0 15 0 0
1823 16 0 0 16 0 0
1824 16 0 0 16 0 0
1825 17 0 0 17 0 0
1826 17 0 0 17 0 0
1827 18 0 0 18 0 0
1828 18 0 0 18 0 0
1829 18 0 0 18 0 0
1830 24 0 0 24 0 0
1831 23 0 0 23 0 0
1832 23 0 0 23 0 0
1833 24 0 0 24 0 0
1834 24 0 0 24 0 0
1835 25 0 0 25 0 0
1836 29 0 0 29 0 0
1837 29 0 0 29 0 0
1838 30 0 0 30 0 0
1839 31 0 0 31 0 0
1840 33 0 0 33 0 0
1841 34 0 0 34 0 0
1842 36 0 0 36 0 0
1843 37 0 0 37 0 0
1844 39 0 0 39 0 0
1845 43 0 0 43 0 0
1846 43 0 0 43 0 0
1847 46 0 0 46 0 0
1848 47 0 0 47 0 0
1849 50 0 0 50 0 0
1850 54 0 0 54 0 0
1851 54 0 0 54 0 0
1852 57 0 0 57 0 0
1853 59 0 0 59 0 0
1854 69 0 0 69 0 0
1855 71 0 0 71 0 0
1856 76 0 0 76 0 0
1857 77 0 0 77 0 0
1858 78 0 0 78 0 0
1859 83 0 0 83 0 0
1860 91 0 0 91 0 0
1861 95 0 0 95 0 0
1862 97 0 0 96 0 0
1863 104 0 0 103 0 0
1864 112 0 0 112 0 0
1865 119 0 0 119 0 0
1866 122 0 0 122 0 0
1867 130 0 0 130 0 0
1868 135 0 0 134 0 0
1869 142 0 0 142 0 0
1870 147 0 1 146 0 0
1871 156 0 1 156 0 0
1872 173 0 1 173 0 0
1873 184 0 1 183 0 0
1874 174 0 1 173 0 0
1875 188 0 1 187 0 0
1876 191 0 1 190 0 0
1877 194 0 2 192 0 0
1878 196 0 2 194 0 0
1879 210 0 3 207 0 0
1880 236 0 3 233 0 0
1881 243 0 4 239 0 0
1882 256 0 4 252 0 0
1883 272 0 3 269 0 0
1884 275 0 4 271 0 0
1885 277 1 4 273 0 0
1886 281 2 5 275 0 0
1887 295 3 5 287 0 0
1888 327 5 5 317 0 0
1889 327 3 6 318 0 0
1890 356 3 8 345 0 0
1891 372 2 9 360 0 0
1892 374 2 9 363 0 0
1893 370 2 10 358 0 0
1894 383 2 9 372 0 0
1895 406 2 11 393 0 0
1896 419 2 12 405 0 0
1897 440 2 13 425 0 0
1898 465 2 13 449 0 0
1899 507 3 14 491 0 0
1900 534 3 16 515 0 0
1901 552 4 18 531 0 0
1902 566 4 19 543 0 0
1903 617 4 20 593 0 0
1904 624 4 23 597 0 0
1905 663 5 23 636 0 0
1906 707 5 23 680 0 0
1907 784 5 28 750 0 0
1908 750 5 30 714 0 0
1909 785 6 32 747 0 0
1910 819 7 34 778 0 0
1911 836 7 36 792 0 0
1912 879 8 37 834 0 0
1913 943 8 41 895 0 0
1914 850 8 42 800 0 0
1915 838 9 45 784 0 0
1916 901 10 48 842 0 0
1917 955 11 54 891 0 0
1918 936 10 53 873 0 0
1919 806 10 61 735 0 0
1920 932 11 78 843 0 0
1921 803 10 84 709 0 0
1922 845 11 94 740 0 0
1923 970 14 111 845 0 0
1924 963 16 110 836 0 0
1925 975 17 116 842 0 0
1926 983 19 119 846 0 0
1927 1062 21 136 905 0 0
1928 1065 23 143 890 10 0
1929 1145 28 160 947 10 0
1930 1053 28 152 862 10 0
1931 940 25 147 759 8 0
1932 847 24 141 675 7 0
1933 893 25 154 708 7 0
1934 973 28 162 775 8 0
1935 1027 30 176 811 9 0
1936 1130 34 192 893 11 0
1937 1209 38 219 941 11 0
1938 1142 37 214 880 12 0
1939 1192 38 222 918 13 0
1940 1299 42 229 1017 11 0
1941 1334 42 236 1043 12 0
1942 1342 45 222 1063 11 0
1943 1391 50 239 1092 10 0
1944 1383 54 275 1047 7 0
1945 1160 59 275 820 7 0
1946 1238 61 292 875 10 0
1947 1392 67 322 992 12 0
1948 1469 76 364 1015 14 0
1949 1419 81 362 960 16 0
1950 1630 97 423 1070 18 23 0.65 2,507,692,308
1951 1767 115 479 1129 20 24 0.69 2,560,869,565
1952 1795 124 504 1119 22 26 0.69 2,601,449,275
1953 1841 131 533 1125 24 27 0.69 2,668,115,942
1954 1865 138 557 1116 27 27 0.69 2,702,898,551
1955 2042 150 625 1208 30 31 0.74 2,759,459,459
1956 2177 161 679 1273 32 32 0.78 2,791,025,641
1957 2270 178 714 1309 34 35 0.79 2,873,417,722
1958 2330 192 731 1336 36 35 0.8 2,912,500,000
1959 2454 206 789 1382 40 36 0.83 2,956,626,506
1960 2569 227 849 1410 43 39 0.85 3,022,352,941
1961 2580 240 904 1349 45 42 0.84 3,071,428,571
1962 2686 263 980 1351 49 44 0.86 3,123,255,814
1963 2833 286 1052 1396 51 47 0.89 3,183,146,067
1964 2995 316 1137 1435 57 51 0.92 3,255,434,783
1965 3130 337 1219 1460 59 55 0.94 3,329,787,234
1966 3288 364 1323 1478 63 60 0.97 3,389,690,722
1967 3393 392 1423 1448 65 66 0.98 3,462,244,898
1968 3566 424 1551 1448 70 73 1.01 3,530,693,069
1969 3780 467 1673 1486 74 80 1.05 3,600,000,000
1970 4053 493 1839 1556 78 87 1.1 3,684,545,455
1971 4208 530 1947 1559 84 88 1.12 3,757,142,857
1972 4376 560 2057 1576 89 95 1.14 3,838,596,491
1973 4614 588 2241 1581 95 110 1.18 3,910,169,492
1974 4623 597 2245 1579 96 107 1.16 3,985,344,828
1975 4596 604 2132 1673 95 92 1.13 4,067,256,637
1976 4864 630 2314 1710 103 108 1.18 4,122,033,898
1977 5016 650 2398 1756 108 104 1.19 4,215,126,050
1978 5074 680 2392 1780 116 106 1.18 4,300,000,000
1979 5357 721 2544 1875 119 98 1.23 4,355,284,553
1980 5301 737 2422 1935 120 86 1.19 4,454,621,849
1981 5138 755 2289 1908 121 65 1.14 4,507,017,544
1982 5094 738 2196 1976 121 64 1.11 4,589,189,189
1983 5075 739 2176 1977 125 58 1.08 4,699,074,074
1984 5258 807 2199 2074 128 51 1.1 4,780,000,000
1985 5417 835 2186 2216 131 49 1.12 4,836,607,143
1986 5583 830 2293 2277 137 46 1.13 4,940,707,965
1987 5725 892 2306 2339 143 44 1.14 5,021,929,825
1988 5936 935 2412 2387 152 50 1.16 5,117,241,379
1989 6066 982 2459 2428 156 41 1.16 5,229,310,345
1990 6074 1026 2492 2359 157 40 1.14 5,328,070,175
1991 6142 1051 2601 2284 161 45 1.14 5,387,719,298
1992 6078 1085 2499 2290 167 36 1.11 5,475,675,676
1993 6070 1117 2515 2225 176 37 1.09 5,568,807,339
1994 6174 1133 2539 2278 186 39 1.09 5,664,220,183
1995 6305 1151 2560 2359 197 39 1.1 5,731,818,182
1996 6448 1198 2626 2382 203 40 1.11 5,809,009,009
1997 6556 1197 2701 2409 209 40 1.11 5,906,306,306
1998 6576 1224 2763 2343 209 36 1.1 5,978,181,818
1999 6561 1258 2741 2310 217 35 1.08 6,075,000,000
2000 6733 1289 2845 2327 226 46 1.1 6,120,909,091
2001 6893 1316 2848 2445 237 47 1.11 6,209,909,910
2002 6994 1342 2832 2518 252 49 1.11 6,300,900,901
2003 7376 1397 2958 2695 276 48 1.16 6,358,620,690
2004 7743 1443 3043 2906 298 54 1.2 6,452,500,000
2005 8042 1485 3068 3108 320 60 1.23 6,538,211,382
2006 8336 1534 3091 3293 356 62 1.26 6,615,873,016
2007 8503 1562 3071 3422 382 66 1.27 6,695,275,591
2008 8776 1630 3103 3587 388 69 1.3 6,750,769,231
2009 8697 1584 3042 3590 415 66 1.27 6,848,031,496
2010 9128 1696 3107 3812 446 67 1.32 6,915,151,515
2011 9503 1756 3134 4055 494 64 1.36 6,987,500,000
2012 9673 1783 3200 4106 519 65 1.36 7,112,500,000
2013 9773 1806 3220 4126 554 68 1.36 7,186,029,412
2014 9855 1823 3280 4117 568 68 1.36 7,246,323,529
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/datalib@1.8.0/datalib.min.js"></script>
<script src="https://unpkg.com/d3-area-label@1.2.0"></script>
<title>Global Carbon Emissions Streamgraph</title>
<style>
body {
margin: 0px;
}
.area-label {
font-family: sans-serif;
fill-opacity: 0.7;
fill: white;
}
path:hover {
fill-opacity: 1;
fill:black;
}
path {
fill-opacity: 0.8;
stroke-width: 0.5;
}
text {
pointer-events: none;
}
.axis--major .tick text, .legend text, .tooltip text {
fill: #585858;
font-family: sans-serif;
font-size: 12pt;
}
.axis--minor .tick text {
display: none;
}
.axis--major .tick line{
stroke: #ddd;
stroke-width: 1px;
}
.axis--minor .tick line{
stroke: #eee;
}
.axis-label {
fill: #585858;
font-family: sans-serif;
font-size: 14pt;
}
.axis .domain {
display: none;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const yLabel = "Global Carbon Emissions (10E6 metric tons)"
const row = d => {
d.Year = new Date(+d.Year);
d.Gas = +d.Gas;
d.Liquids = +d.Liquids;
d.Solids = +d.Solids;
d.Cement = +d.Cement;
d.Flaring = +d.Flaring;
d.Total = +d.Total;
d.Capita = 0;
return d;
};
// Load and summarize the data.
d3.csv('dataco2tall.csv', row, data => {
render(data);
});
var margin = { top: 0, bottom: 30, left: 80, right: 10 };
var svg = d3.select('svg');
var width = +svg.attr('width');
var height = +svg.attr('height');
var g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
var xAxisG = g.append('g')
.attr('class', 'axis');
var yAxisG = g.append('g')
.attr('class', 'axis axis--major axis--y');
var xAxisMinorG = xAxisG.append('g')
.attr('class', 'axis axis--minor');
var xAxisMajorG = xAxisG.append('g')
.attr('class', 'axis axis--major');
var marksG = g.append('g');
const keys = ["Gas","Liquids","Solids","Cement","Flaring"];
var stack = d3.stack()
.keys(keys);
var xValue = function (d) { return d.Year; };
var xScale = d3.scaleTime();
var yScale = d3.scaleLinear();
var colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
var xAxisMajor = d3.axisBottom().scale(xScale).tickFormat(d3.format('0'));
var xAxisMinor = d3.axisBottom().scale(xScale).ticks(30);
var yAxis = d3.axisLeft().scale(yScale).ticks(10);
var area = d3.area()
.x(d => xScale(xValue(d.data)))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]))
.curve(d3.curveBasis);
// Render StreamGraph
function render(data) {
const stacked = stack(data)
console.log(keys);
console.log(stacked);
var innerWidth = width - margin.right - margin.left;
var innerHeight = height - margin.top - margin.bottom;
xScale
.domain(d3.extent(data, xValue))
.range([0, innerWidth]);
yScale
.domain([
d3.min(stacked, function (series) {
return d3.min(series, function (d) { return d[0]; });
}),
d3.max(stacked, function (series) {
return d3.max(series, function (d) { return d[1]; });
})
])
.range([innerHeight, 0]);
//check y domain and range
console.log(yScale.domain())
console.log(yScale.range())
colorScale.domain(d3.range(keys.length));
var paths = marksG.selectAll('path').data(stacked);
var pathsEnter = paths
.enter().append('path');
pathsEnter.merge(paths)
.attr('fill', function (d) { return colorScale(d.index); })
.attr('stroke', function (d) { return colorScale(d.index); })
.attr('d', area);
paths.select('title')
.merge(pathsEnter.append('title'))
.text(function (d) { return d.key; })
var labels = marksG.selectAll('text').data(stacked)
labels
.enter().append('text')
.attr('class', 'area-label')
.merge(labels)
.text(function (d) { return d.key; })
.attr('transform', d3.areaLabel(area).interpolateResolution(1000));
console.log(innerHeight)
//TypeError: cannot read property TickSize of Null
xAxisMajor.tickSize(2);
xAxisMinor.tickSize(0);
yAxis.tickSize(-innerWidth);
xAxisG.attr('transform', `translate(0,${innerHeight})`);
xAxisMajorG.call(xAxisMajor);
xAxisMinorG.call(xAxisMinor);
yAxisG.call(yAxis)
yAxisG.append('text')
.attr('class', 'axis-label')
.attr('x', -innerHeight / 2)
.attr('y', -60)
.attr('transform', `rotate(-90)`)
.style('text-anchor', 'middle')
.text(yLabel);
;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment