D3 Examples - Mini Chart

xxxxxxxxxx
 
<!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 yAxis = graph.append("g")
      .attr("transform", "translate(" + (-margin.left / 2) + "," + 0 + ")")
    ;
    
    var line = d3.svg.line()
        .x(function(d){ return x(d.year); })
        .y(function(d){ return y(d.amount); })
    
    var changeFormat = d3.format(".1f"),
        numberFormat = d3.format(",.0f");
    
    d3.csv("data.csv", function(raw){
      raw.unshift({year: NaN, amount: NaN});
      
      raw.forEach(function(d, i){
        d.year = +d.year;
        d.amount = +d.amount;
      })
      
      var dataPairs = d3.pairs(raw); 
      
      var data = dataPairs.map(function(d){
        var d0 = d[0],
            d1 = d[1];
        d1.change = d1.amount / d0.amount - 1;
        return d1;
      })
      
      console.table(data);  
      
      x.domain(data.map(function(d){ return d.year; }))
      
      var yExt = d3.extent(data, function(d){ return d.amount; })
        y.domain(yExt).nice();
      
      var spark = graph.append("path").datum(data)
              .attr("class", "spark")
                .attr("d", line);
      
      var points = graph.selectAll("circle.point").data(data);
      
      points.enter().append("circle").attr("class", "point")
            .attr("cx", function(d){ return x(d.year); })
          .attr("cy", function(d){ return y(d.amount); })
          .attr("r", 5)
​
      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>
​
    