blockspring/configs.json

## configs.json
{
  "appearance": {
    "colors": {
      "readable": "Colors",
      "category": "Colors",
      "placeholder": null,
      "values": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
      "description": "Sets the colors used in the graph. Each color will be used for 1 series. If you specify less colors than series, colors will be repeated.",
      "type": "multiple_colors_arbitrary"
    }
  },
  "roles": {
    "streamHeight": {
      "allows_multiple": false,
      "required": true,
      "types": [
        "number"
      ],
      "sample_columns": [
        "clicks"
      ],
      "description": "Creates the stream."
      },
    "series": {
      "allows_multiple": false,
      "required": true,
      "types": [
        "string",
        "date",
        "number"
      ],
      "sample_columns": [
        "subject"
      ],
      "description": "Creates multiple streams."
    },
    "grafly_dropdowns": {
       "allows_multiple": true,
       "required": false,
       "types": [
         "string",
         "date",
         "number"
       ],
       "sample_columns": [
        "subject"
       ],
       "description": "dropdowns."
    }
  }
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    margin: 0;
}

path {
  stroke: #000;
  fill-opacity: .8;
}

</style>
<body>
    <div id="dropdowns"></div>
    <div id="chart"></div>
<!-- Blockspring Boilerplate CSS -->
<link rel="stylesheet" href="//www.blockspring.com/graph_templates/api_v1/boilerplate.css">

<!-- Blockspring Boilerplate JS -->
<script src="//www.blockspring.com/graph_templates/api_v1/boilerplate.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  Block.ready(renderStream)

  function renderStream(){

    // Update 0: Make width and height the whole page.
    var width = $(document).width(),
      height = $(document).height();

    // Update Extra-Credit 2: Adjust height of graph if dropdowns and empty page.
    if (Block.vars.csv.columnRoleMap.grafly_dropdowns.length != 0){
        height = height - 50;
        $("#chart").empty();
      }

    // Update 1: Get CSV data from BlockSpring API (vars.csv.data)
    var csv = Block.vars.csv.data;

    // Update 2: Get headers from BlockSpring API (vars.csv.columnRoleMap)
    var streamHeightHeader = Block.vars.csv.columnRoleMap.streamHeight[0];
    var seriesHeader = Block.vars.csv.columnRoleMap.series[0];

    // Get unique list of series
    var uniqueSeries = findUniqueSeries(csv);
    var m = uniqueSeries.length; // number of series

    // Transform csv data
    var data = transformCSV(csv, uniqueSeries);
    var n = data[0].length; // number of values assuming each series has equal # of values.

    // set scales for x and y positions, and area size.
    var x = d3.scale.linear()
        .domain([0, n - 1])
        .range([0, width]);

    var y = d3.scale.ordinal()
        .domain(d3.range(m))
        .rangePoints([0, height], 1);

    var z = d3.scale.linear()
        .domain(d3.extent(csv, function(d){ return d[streamHeightHeader]; }))
        .range([0, height / (2*m)]);

    // Update Extra-Credit 1: Add colors as a variable configuration.
    // set scales for color.
    var color = d3.scale.ordinal()
        .range(Block.vars.colors);

    // instantiate area function.
    var area = d3.svg.area()
        .interpolate("basis")
        .x(function(d, i) { return x(i); })
        .y0(function(d) { return -z(d); })
        .y1(function(d) { return z(d); });

    // add svg to dom.
    var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height);

    // add area plots to dom.
    svg.selectAll("path")
        .data(data)
      .enter().append("path")
        .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
        .style("fill", function(d, i) { return color(i); })
        .attr("d", area);

    function findUniqueSeries(csv){
        // Get a unique list of series.
        var uniqueSeries = d3.set(csv.map(function(row){
            return row[seriesHeader];
        })).values();

        return uniqueSeries;
    }

    function transformCSV(csv, uniqueSeries){
        // Transform csv data into array of arrays.
        var dataObject = {};

        uniqueSeries.forEach(function(series){
          dataObject[series] = [];
        })

        csv.forEach(function(row){
          dataObject[row[seriesHeader]].push(row[streamHeightHeader]);
        })

        return d3.values(dataObject);
    }
  }
</script>

## sample_data.csv

          
            clicks
            subject

            
              100
              dog video

            
              80
              dog video

            
              120
              dog video

            
              130
              dog video

            
              135
              dog video

            
              80
              dog video

            
              85
              dog video

            
              145
              dog video

            
              160
              dog video

            
              90
              dog video

            
              150
              cat video

            
              120
              cat video

            
              110
              cat video

            
              130
              cat video

            
              90
              cat video

            
              100
              cat video

            
              150
              cat video

            
              120
              cat video

            
              130
              cat video

            
              125
              cat video
	{
	"appearance": {
	"colors": {
	"readable": "Colors",
	"category": "Colors",
	"placeholder": null,
	"values": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
	"description": "Sets the colors used in the graph. Each color will be used for 1 series. If you specify less colors than series, colors will be repeated.",
	"type": "multiple_colors_arbitrary"
	}
	},
	"roles": {
	"streamHeight": {
	"allows_multiple": false,
	"required": true,
	"types": [
	"number"
	],
	"sample_columns": [
	"clicks"
	],
	"description": "Creates the stream."
	},
	"series": {
	"allows_multiple": false,
	"required": true,
	"types": [
	"string",
	"date",
	"number"
	],
	"sample_columns": [
	"subject"
	],
	"description": "Creates multiple streams."
	},
	"grafly_dropdowns": {
	"allows_multiple": true,
	"required": false,
	"types": [
	"string",
	"date",
	"number"
	],
	"sample_columns": [
	"subject"
	],
	"description": "dropdowns."
	}
	}
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	margin: 0;
	}

	path {
	stroke: #000;
	fill-opacity: .8;
	}

	</style>
	<body>
	<div id="dropdowns"></div>
	<div id="chart"></div>
	<!-- Blockspring Boilerplate CSS -->
	<link rel="stylesheet" href="//www.blockspring.com/graph_templates/api_v1/boilerplate.css">

	<!-- Blockspring Boilerplate JS -->
	<script src="//www.blockspring.com/graph_templates/api_v1/boilerplate.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	Block.ready(renderStream)

	function renderStream(){

	// Update 0: Make width and height the whole page.
	var width = $(document).width(),
	height = $(document).height();

	// Update Extra-Credit 2: Adjust height of graph if dropdowns and empty page.
	if (Block.vars.csv.columnRoleMap.grafly_dropdowns.length != 0){
	height = height - 50;
	$("#chart").empty();
	}

	// Update 1: Get CSV data from BlockSpring API (vars.csv.data)
	var csv = Block.vars.csv.data;

	// Update 2: Get headers from BlockSpring API (vars.csv.columnRoleMap)
	var streamHeightHeader = Block.vars.csv.columnRoleMap.streamHeight[0];
	var seriesHeader = Block.vars.csv.columnRoleMap.series[0];

	// Get unique list of series
	var uniqueSeries = findUniqueSeries(csv);
	var m = uniqueSeries.length; // number of series

	// Transform csv data
	var data = transformCSV(csv, uniqueSeries);
	var n = data[0].length; // number of values assuming each series has equal # of values.

	// set scales for x and y positions, and area size.
	var x = d3.scale.linear()
	.domain([0, n - 1])
	.range([0, width]);

	var y = d3.scale.ordinal()
	.domain(d3.range(m))
	.rangePoints([0, height], 1);

	var z = d3.scale.linear()
	.domain(d3.extent(csv, function(d){ return d[streamHeightHeader]; }))
	.range([0, height / (2*m)]);

	// Update Extra-Credit 1: Add colors as a variable configuration.
	// set scales for color.
	var color = d3.scale.ordinal()
	.range(Block.vars.colors);

	// instantiate area function.
	var area = d3.svg.area()
	.interpolate("basis")
	.x(function(d, i) { return x(i); })
	.y0(function(d) { return -z(d); })
	.y1(function(d) { return z(d); });

	// add svg to dom.
	var svg = d3.select("#chart").append("svg")
	.attr("width", width)
	.attr("height", height);

	// add area plots to dom.
	svg.selectAll("path")
	.data(data)
	.enter().append("path")
	.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
	.style("fill", function(d, i) { return color(i); })
	.attr("d", area);

	function findUniqueSeries(csv){
	// Get a unique list of series.
	var uniqueSeries = d3.set(csv.map(function(row){
	return row[seriesHeader];
	})).values();

	return uniqueSeries;
	}

	function transformCSV(csv, uniqueSeries){
	// Transform csv data into array of arrays.
	var dataObject = {};

	uniqueSeries.forEach(function(series){
	dataObject[series] = [];
	})

	csv.forEach(function(row){
	dataObject[row[seriesHeader]].push(row[streamHeightHeader]);
	})

	return d3.values(dataObject);
	}
	}
	</script>
	clicks	subject
	100	dog video
	80	dog video
	120	dog video
	130	dog video
	135	dog video
	80	dog video
	85	dog video
	145	dog video
	160	dog video
	90	dog video
	150	cat video
	120	cat video
	110	cat video
	130	cat video
	90	cat video
	100	cat video
	150	cat video
	120	cat video
	130	cat video
	125	cat video