Tributary inlet

_.md

[ Launch: Tributary inlet ] 5384987 by jpmarindiaz
[ Launch: Tributary inlet ] 5384861 by jpmarindiaz
[ Launch: Tributary inlet ] 5384756 by jpmarindiaz

config.json

{"description":"Tributary inlet","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}

inlet.js

var lineData = [ 
{ "x": 1,   "y": 5},  { "x": 20,  "y": 20},
{ "x": 40,  "y": 10}, { "x": 60,  "y": 40},
{ "x": 129,  "y": 5},  { "x": 150, "y": -21}
];

var svg = d3.select("svg");


var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");

var lineGraph = svg.append("path")
.attr("transform", "translate(" + [50, 50] + ")")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");

var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("step-before");

var lineGraph = svg.append("path")
.attr("transform", "translate(" + [50, 119] + ")")
.attr("d", lineFunction(lineData))
.attr("stroke", "#DB2222")
.attr("stroke-width", 2)
.attr("fill", "none");

var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");

var lineGraph = svg.append("path")
.attr("transform", "translate(" + [50, 191] + ")")
.attr("d", lineFunction(lineData))
.attr("stroke", "#16A51C")
.attr("stroke-width", 6.96)
.attr("fill", "yellow");