Global Carbon Emissions by Year, 1751-2011

A visualization of total global carbon emssions, in units of one million metric tons of carbon, from 1751 to 2014. The sources of these emissions include combustion of fossil fuels (gas, liquid, and solid), cement manufacturing, and gas flaring.

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.

forked from curran's block: Line Chart of Temperature

<!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>
    <title>Temperature Visualization</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
        stroke-width: 1;
      }
      .tick text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 12pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.Year;
      const xLabel = 'Year';
      const yValue = d => d.Total;
      const yLabel = 'Total Global Carbon Emissions (10E6 metric tons)';
      const margin = { left: 120, right: 30, top: 20, bottom: 120 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 50)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .ticks(10)
      	.tickFormat(d3.format("0"))
        .tickSize(-innerHeight);

const yTicks = 5;
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(15)
        .tickSize(-innerWidth);

const line = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScale(yValue(d)))
        .curve(d3.curveBasis);

const row = d => {
        d.Year = +d.Year;
        d.Total = +d.Total;
        return d;
      };

d3.csv('dataco2tall.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth]);

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice(yTicks);

g.append('path')
            .attr('fill', 'none')
            .attr('stroke', 'brown')
            .attr('stroke-width', 4)
            .attr('d', line(data));

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js