D3 Examples - Inline Sparkline

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;
      font-size: 14px;
        }
    
    div {
      display: inline;  
      margin: 20px 0px 0px 20px;
    }
    
    .spark {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
    
    .point {
      fill: steelblue;
      stroke: #fff;
    }
    
    .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>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <span id="spark1"></span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate <span id="spark2"></span> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <span id="spark3"></span>culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <script>
    console.clear();
    
    var changeFormat = d3.format(".1f"),
        numberFormat = d3.format(",.0f");
   
    d3.csv("data.csv", function(raw){
      
      var data = wide2long(raw);
      
      //console.log(data);
      
      nested = d3.nest()
        .key(function(d){ return d.measure; })
        .entries(data);
      
      //console.log("nested", nested)
      console.table(nested[0].values)
      
      d3.select("#spark1")
        .datum(nested[0].values)
        .call(sparkline().numberFormat(d3.format(",.0f")));
      
      d3.select("#spark2")
        .datum(nested[1].values)
        .call(sparkline().numberFormat(d3.format(".2f")));
      
      d3.select("#spark3")
        .datum(nested[2].values)
        .call(sparkline().numberFormat(d3.format(".1%")));
        
      console.log("hello3");
      
        //.values.forEach(function(d){
        //makeChart(d.values); 
      //})
​
        //makeChart(data);   
    });
    
    function wide2long(wide){
        var long = [];
      
      var columns = d3.keys(wide[0]),
          keys = ["group", "year"],
            vals = columns.filter(function(k){ return !k.match(/(group|year)/); })
      
      wide.forEach(function(d, i){
        
            vals.forEach(function(v){ 
                row = {};
                        row.raw_row = i;
            
            keys.forEach(function(k){
              row[k] = d[k];
            });
            
            row.measure = v;
            row.amount = +d[v];
​
                    long.push(row);
          
        });
      })
      
      return long; 
    }
    
    function dataPrep(raw) {
      // fix data
      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;
      })
      
      return data;
      
    }
    
    function sparkline() {
      
          var margin = {top: 0, bottom: 0, left: 0, right: 0},
              height = 10 - margin.top - margin.bottom, // default height
          width = 30 - margin.left - margin.right,  // default width
              changeFormat = d3.format(".1f"),
          numberFormat = d3.format(",.0f"),
          xScale = d3.scale.ordinal(),
          yScale = d3.scale.linear(),
            line = d3.svg.line()
                .x(function(d){ return xScale(d.year); })
                .y(function(d){ return yScale(d.amount); });
      
      function chart(selection) {
        selection.each(function(raw){
        
          var chartData = dataPrep(raw);
          
          console.table(chartData);
          
          var yExt = d3.extent(chartData, function(d){ return d.amount; });
                    
          xScale
            .domain(chartData.map(function(d){ return d.year; }))
            .rangePoints([0, width]);
          
          yScale
            .domain(yExt).nice()
            .range([height, 0]);
​
          // Select the svg element, if it exists.
          var svg = d3.select(this).selectAll("svg").data([chartData]);
​
          // Otherwise, create the skeletal chart.
          var gEnter = svg.enter().append("svg").append("g");
          gEnter.append("g").attr("class", "y axis");
                
        
          // Update the outer dimensions.
          svg .attr("width", width + margin.left  + margin.right)
              .attr("height", height + margin.top + margin.bottom);
​
          // Update the inner dimensions.
          var g = svg.select("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
          // Update the lines
          var spark = g.append("path").datum(chartData)
              .attr("class", "spark")
              .attr("d", line);
          
        });
      }
​
      chart.width = function(value) {
        if (!arguments.length) return width;
        width = value;
        return chart;
      };
​
      chart.height = function(value) {
        if (!arguments.length) return height;
        height = value;
        return chart;
      };
​
      chart.numberFormat = function(value) {
        if (!arguments.length) return numberFormat;
        numberFormat = value;
        return chart;
      };
​
      chart.changeFormat = function(value) {
        if (!arguments.length) return changeFormat;
        changeFormat = value;
        return chart;
      };
      
      return chart;
    }
    
  </script>
</body>
​
    