arches

_.md

[ Launch: Tributary inlet ] 6393970 by joannecheng

config.json

{"description":"arches","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/dD9AV2h.png"}

inlet.js

var addMeanToData = function(datum) {
	return [datum[0], (datum[0]) + 0.1, datum[1] - 0.1, datum[1]];
};
var svg = d3.select('svg')

var w = 200;
var h = 800;

var data = [[1,3], [1,6], [4, 10], [2, 9], [3, 14], [10, 12]];

var xScale = d3.scale.linear()
	.domain([0, 14]).range([0, 500]);

var yScale = d3.scale.linear()
    .domain([0, 1])
    .range([0, 20]) //svg corner starts at top left

var line = d3.svg.line()
.x(function(d) {
	return xScale(d);
})
.y(function(d, i){
  if (i === 0 || i === this.__data__.length-1) {
    return 60;
  }
  else {
    var data = this.__data__;
    return 10 - d3.random.normal(yScale(data[2]-data[0])/4)();
  }
})
.interpolate('basis');


for (var i in data) {
  var datum = data[i];
  console.log(datum);
  datum = addMeanToData(datum);
  svg.append("path")
	.data([datum])
	.attr('d', line)
    .style("fill", "none")
    .style("stroke", "#000000")
    .attr("transform", function(d) { return "translate(" + [20, 100] + ")" ;})
}