brevity/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A look at the water flowing through Barton Creek.

Using data from the USGS Instantaneous Values Web Service.

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

button {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>

var n = 20, // number of layers
    m = 200, // number of samples per layer
    stack = d3.layout.stack().offset("wiggle");
    //layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
    //layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));

function grabDepths(e,i){
  return [e.dateTime, e.value];
}
var depths = [];
//var url = 'http://waterservices.usgs.gov/nwis/iv/?format=json&parameterCd=00065&startDT=2014-6-1&sites=08155400,08155300,08155240';
var url = 'http://waterservices.usgs.gov/nwis/iv/?format=json&parameterCd=00060&startDT=2014-6-20&sites=08155400,08155300,08155240';
var numberOfLayers = 0;
$.ajax(url, {success:function(data){
  numberOfLayers = data.value.timeSeries.length;
  var timeSeriesPlural = [];
  for(var i = 0; i < numberOfLayers; i++){
    var tmp = data.value.timeSeries[i].values[0].value;
    timeSeriesPlural[i] = tmp.map(grabDepths);
  }
  var timeSeriesCollated = {};
  for(i = 0; i < numberOfLayers; i++){
    var series = timeSeriesPlural[i];
    for(var ii = 0; ii < series.length; ii++){
      var dt = series[ii][0],
          v = series[ii][1];
      if(!timeSeriesCollated[dt]){timeSeriesCollated[dt] = {};}
      timeSeriesCollated[dt][i] = v;
      //if(i == timeSeriesPlural.length -1){console.log(dt, timeSeriesCollated[dt]);}
    }
  }
  convertData(timeSeriesCollated);
}});
  function convertData(timeSeriesCollated){
  var times = [];
  var depthsWithoutTimes = _.map(timeSeriesCollated, function(v,k,l){if(Object.keys(v).length == numberOfLayers){times.push(k);return _.toArray(v);}});
  //console.log(depthsWithoutTimes);
  var range = d3.range(numberOfLayers);
  var datas = [];
  console.log(depthsWithoutTimes);
  range.map(function(e, i) {
    datas[i] = [];
    depthsWithoutTimes.map(function(ee,ii,arr){
      if(arr[ii] !== undefined){
        try{
        var y = arr[ii][i];
        var d = {x:parseInt(ii), y:parseInt(y)};
        } catch(e){
          console.log(i, ii, y);
        }
        datas[i].push(d);
      }
    })
  })
  layers0 = stack(datas);
  console.log("Layers0");
  console.log(layers0);
  console.log("datas");
  console.log(datas);
  setupGraph(layers0);
}

function setupGraph(layers){

  var width = 960,
      height = 500;

  var x = d3.scale.linear()
      .domain([0, m - 1])
      .range([0, width]);

  var y = d3.scale.linear()
      .domain([0, d3.max(layers.concat(layers), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
      .range([height, 0]);

  var color = d3.scale.linear()
      .range(["#000099", "#00AAAA"]);

  var area = d3.svg.area()
      .x(function(d) { return x(d.x); })
      .y0(function(d) { return y(d.y0); })
      .y1(function(d) { return y(d.y0 + d.y); });

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  svg.selectAll("path")
      .data(layers)
    .enter().append("path")
      .attr("d", area)
      .style("fill", function() { return color(Math.floor(Math.random()*100)*.01); });

}
function transition() {
  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })
    .transition()
      .duration(2500)
      .attr("d", area);
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n) {

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = 0;
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Streamgraph</title>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	button {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script>

	var n = 20, // number of layers
	m = 200, // number of samples per layer
	stack = d3.layout.stack().offset("wiggle");
	//layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
	//layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));

	function grabDepths(e,i){
	return [e.dateTime, e.value];
	}
	var depths = [];
	//var url = 'http://waterservices.usgs.gov/nwis/iv/?format=json&parameterCd=00065&startDT=2014-6-1&sites=08155400,08155300,08155240';
	var url = 'http://waterservices.usgs.gov/nwis/iv/?format=json&parameterCd=00060&startDT=2014-6-20&sites=08155400,08155300,08155240';
	var numberOfLayers = 0;
	$.ajax(url, {success:function(data){
	numberOfLayers = data.value.timeSeries.length;
	var timeSeriesPlural = [];
	for(var i = 0; i < numberOfLayers; i++){
	var tmp = data.value.timeSeries[i].values[0].value;
	timeSeriesPlural[i] = tmp.map(grabDepths);
	}
	var timeSeriesCollated = {};
	for(i = 0; i < numberOfLayers; i++){
	var series = timeSeriesPlural[i];
	for(var ii = 0; ii < series.length; ii++){
	var dt = series[ii][0],
	v = series[ii][1];
	if(!timeSeriesCollated[dt]){timeSeriesCollated[dt] = {};}
	timeSeriesCollated[dt][i] = v;
	//if(i == timeSeriesPlural.length -1){console.log(dt, timeSeriesCollated[dt]);}
	}
	}
	convertData(timeSeriesCollated);
	}});
	function convertData(timeSeriesCollated){
	var times = [];
	var depthsWithoutTimes = _.map(timeSeriesCollated, function(v,k,l){if(Object.keys(v).length == numberOfLayers){times.push(k);return _.toArray(v);}});
	//console.log(depthsWithoutTimes);
	var range = d3.range(numberOfLayers);
	var datas = [];
	console.log(depthsWithoutTimes);
	range.map(function(e, i) {
	datas[i] = [];
	depthsWithoutTimes.map(function(ee,ii,arr){
	if(arr[ii] !== undefined){
	try{
	var y = arr[ii][i];
	var d = {x:parseInt(ii), y:parseInt(y)};
	} catch(e){
	console.log(i, ii, y);
	}
	datas[i].push(d);
	}
	})
	})
	layers0 = stack(datas);
	console.log("Layers0");
	console.log(layers0);
	console.log("datas");
	console.log(datas);
	setupGraph(layers0);
	}

	function setupGraph(layers){

	var width = 960,
	height = 500;

	var x = d3.scale.linear()
	.domain([0, m - 1])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, d3.max(layers.concat(layers), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
	.range([height, 0]);

	var color = d3.scale.linear()
	.range(["#000099", "#00AAAA"]);

	var area = d3.svg.area()
	.x(function(d) { return x(d.x); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll("path")
	.data(layers)
	.enter().append("path")
	.attr("d", area)
	.style("fill", function() { return color(Math.floor(Math.random()100).01); });

	}
	function transition() {
	d3.selectAll("path")
	.data(function() {
	var d = layers1;
	layers1 = layers0;
	return layers0 = d;
	})
	.transition()
	.duration(2500)
	.attr("d", area);
	}

	// Inspired by Lee Byron's test data generator.
	function bumpLayer(n) {

	function bump(a) {
	var x = 1 / (.1 + Math.random()),
	y = 2 * Math.random() - .5,
	z = 10 / (.1 + Math.random());
	for (var i = 0; i < n; i++) {
	var w = (i / n - y) * z;
	a[i] += x * Math.exp(-w * w);
	}
	}

	var a = [], i;
	for (i = 0; i < n; ++i) a[i] = 0;
	for (i = 0; i < 5; ++i) bump(a);
	return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
	}
	</script>