Tributary inlet

_.md

[ Launch: Tributary inlet ] 678ee97c1f12da6db725 by ramnathv

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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SC3OBFl.png"}

inlet.js

var margin = {top: 123, bottom: 20, left: 207, right: 20},
    width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom

var svg = d3.select('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
	 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var x = d3.scale.linear()
  .range([0, width])
  

var y = d3.scale.linear()
  .range([height, 0])

var data = [
  { "x": 1,   "y": 5},  
  { "x": 20,  "y": 20},
  { "x": 40,  "y": 10}, 
  { "x": 60,  "y": 40},
  { "x": 80,  "y": 5},  
  { "x": 100, "y": 60}
];

var spec = {x: "x", y: "y", data: data, scales: {x: x, y: y}}

function render_line(spec){
  spec.scales.x.domain([0, 100]),
  spec.scales.y.domain([0, 100])
  
  var line = d3.svg.line()
    .x(function(d){return spec.scales.x(d[spec.x])})
    .y(function(d){return spec.scales.y(d[spec.y])})
    .interpolate('basis')

  return svg.append('g').append('path')
    .datum(spec.data)
      .attr('class', 'line')
      .attr('d', line)
     .attr("stroke", "blue")
     .attr("stroke-width", 2)
     .attr("fill", "none");
  
}


var line = render_line(spec)