Mini Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <style>
    body { 
      margin: 0;position:fixed;top:0;right:0;bottom:0;left:0; 
  		font-family: 'Montserrat', sans-serif;
		}
    
    svg { width:100%; height: 100% }
    
    .spark {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
    
    .point {
      fill: steelblue;
      stroke: #fff;
      stroke-width: 3px;
    }
    
    .label,
    .change, 
    .axis, 
    .main {
      text-anchor: middle;
      alignment-baseline: middle;
      fill: #aaa;
    }
    
    .change, 
    .main {
      text-anchor: middle;
      alignment-baseline: middle;
      fill: #333;
    }
    
    line.axis {
      stroke: #aaa;
      stroke-width: 1.5px;
    }

</style>
</head>

<body>
  <script>
    var margin = {top: 20, bottom: 50, left: 80, right: 20},
    		height = 200 - margin.top - margin.bottom,
        width = 300 - margin.left - margin.right;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    
    var graph = svg.append("g")
    				.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    
    var x = d3.scale.ordinal()
	    .rangePoints([0, width]);
    
    var y = d3.scale.linear()
    	.range([height, 0])

var labels = svg.selectAll("text.label").data(data);
      
      labels.enter().append("text").attr("class", "label");
      
      labels.text(function(d){ return d.year; })
        .attr("transform", "translate(" + margin.left + "," + (height+margin.top) + ")")
        .attr("x", function(d){ return x(d.year); })
        .attr("y", 20)

var changes = svg.selectAll("text.change")
        .data(data.filter(function(d){ return !isNaN(d.change); }));

changes.enter().append("text").attr("class", "change");
      
      changes.text(function(d){ return changeFormat(d.change * 100); })
        .attr("transform", "translate(" + margin.left + "," + (height+margin.top) + ")")
        .attr("x", function(d){ return x(d.year); })
        .attr("y", 40)
      		
      yAxis.append("text").attr("class", "axis max")
        .text(numberFormat(yExt[1]))
      	.attr("y", y(yExt[1]));
      
      yAxis.append("line").attr("class", "axis")
      	.attr({
        	x1: 0, y1: y(yExt[1]) + 10,
          x2: 0, y2: y(yExt[0]) - 10
      	});
      
      yAxis.append("text").attr("class", "axis min")
        .text(numberFormat(yExt[0]))
      	.attr("y", y(yExt[0]));
      
      svg.append("text").text("YOY % Chg").attr("class", "main")
        .attr("transform", "translate(" + 0 + "," + (height+margin.top) + ")")
        .attr("x", 50)
        .attr("y", 40)
    }); 
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js