blockspring · August 29, 2015 14:02
diff --git a/configs.json b/configs.json
 {
  "appearance": {
  },
  "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."
    }
  }
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
    margin: 0;
 }

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

 </style>
 <body>
    <div id="chart"></div>

 <!-- 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 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)]);

    // set scales for color.
    var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

    // 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>
diff --git a/sample_data.csv b/sample_data.csv
	{
	"appearance": {
	},
	"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."
	}
	}
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	margin: 0;
	}

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

	</style>
	<body>
	<div id="chart"></div>

	<!-- 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 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)]);

	// set scales for color.
	var color = d3.scale.ordinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

	// 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