Line Chart (CO2 Emissions)

An example of a line chart showing historic CO2 emissions (metric tons per capita). Uses swoopy-drag for annotations.

This is part of a series of visualisations called My Visual Vocabulary which aims to recreate every visualisation in the FT's Visual Vocabulary from scratch using D3.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="swoopy-drag.js"></script>
  <style>
    body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
    
    body {
      font-family: monospace;
    }
    
    .x-axis, .y-axis {
      font-family: monospace;
      font-size: 9px;
    }
    
    .line {
      fill: none;
      stroke-width: 1px;
      stroke: url(#svgGradient);
      opacity: 0.2;
    }
    
    .annotation {
      fill: none;
      stroke: black;
    }
    
    #arrowhead {
      fill: none;
      stroke: black;
    }
    
    .annotations path {
      fill: none;
      stroke: black;
    }
    
    #arrow {
      fill: none;
      stroke: black;
    }
  </style>
</head>

<body>
  <script>
    var margin = { top: 50, right: 50, bottom: 50, left: 50 };
    
    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    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 + ")");
    
    var defs = svg.append("defs");
		
    // add gradient
  	defs.append("linearGradient")
      .attr("id", "svgGradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0).attr("y1", height)
      .attr("x2", 0).attr("y2", height / 4)
    .selectAll("stop")
      .data([
        {offset: "0%", color: "blue"},
        {offset: "25%", color: "red"},
        {offset: "100%", color: "red"}
      ])
    .enter().append("stop")
      .attr("offset", function(d) { return d.offset; })
      .attr("stop-color", function(d) { return d.color; });
    
    svg.append('marker')
      .attr('id', 'arrow')
      .attr('viewBox', '-10 -10 20 20')
      .attr('markerWidth', 20)
      .attr('markerHeight', 20)
      .attr('orient', 'auto')
    .append('path')
      .attr('d', 'M-6.75,-6.75 L 0,0 L -6.75,6.75')
    
    var legend = svg.append("g")
    	.attr("transform", "translate(" + width +",0)")
    
    legend.append("text")
    	.attr("text-anchor", "end")
    	.text("CO2 emissions (metric tons per capita)");
		
    var x = d3.scaleTime()
    	.range([0, width]);
    
    var y = d3.scaleLinear()
    	.range([height, 0]);
    
    var annotations = [
      {
        "year": "2001",
        "value": 65,
        "path": "M -58,-54 A 41.833 41.833 0 0 1 -28,10",
        "text": "Qatar",
        "textOffset": [
          -108,
          -51
        ]
      },
      {
        "year": "1970",
        "value": 65,
        "path": "M -31,94 A 46.787 46.787 0 0 0 -55,154",
        "text": "USA",
        "textOffset": [
          -17,
          93
        ]
      },
      {
        "year": "1980",
        "value": 65,
        "path": "M -62,116 A 48.668 48.668 0 0 1 -71,182",
        "text": "Great Britain",
        "textOffset": [
          -118,
          103
        ]
      },
      {
        "year": "1990",
        "value": 65,
        "path": "M 71,136 A 103.606 103.606 0 0 0 -18,214",
        "text": "World",
        "textOffset": [
          86,
          141
        ]
      }
    ];
    
    var swoopy = d3.swoopyDrag()
    	.x(function(d) { return x(parseTime(d.year)) })
    	.y(function(d) { return y(d.value) })
    	.annotations(annotations);
    
    var parseTime = d3.timeParse("%Y");
    
    var line = d3.line()
      .x(function(d) { return x(parseTime(d.year)) })
      .y(function(d) { return y(d.value) })
    	.curve(d3.curveMonotoneX)

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