SpaceActuary/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from SpaceActuary's block: Mini Chart
forked from SpaceActuary's block: Mini Charts

  
## data.csv

          
            group
            year
            amount1
            amount2
            amount3

            
              ABC
              2010
              11124
              50.236
              0.558825264

            
              ABC
              2011
              11433
              51.577
              0.589679841

            
              ABC
              2012
              11914
              49.006
              0.583857484

            
              ABC
              2013
              11734
              48.706
              0.571516204

            
              ABC
              2014
              12222
              50.496
              0.617162112

            
              ABC
              2015
              11943
              52.802
              0.630614286

## index.html
<!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>
group	year	amount1	amount2	amount3
ABC	2010	11124	50.236	0.558825264
ABC	2011	11433	51.577	0.589679841
ABC	2012	11914	49.006	0.583857484
ABC	2013	11734	48.706	0.571516204
ABC	2014	12222	50.496	0.617162112
ABC	2015	11943	52.802	0.630614286
	<!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>