Inline Sparkline v4

forked from SpaceActuary's block: Mini Chart

forked from SpaceActuary's block: Mini Charts

forked from SpaceActuary's block: Inline Sparkline

<!DOCTYPE html>
<head>
  <meta charset="utf-8"> 
  <script src="https://d3js.org/d3.v4.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.scalePoint(),
          yScale = d3.scaleLinear(),
    	    line = d3.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; }))
          	.range([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 svgEnter = svg.enter().append("svg")
          
          svg = svg.merge(svgEnter);
          
          var gEnter = svgEnter.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>

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