Tributary inlet

_.md

[ Launch: Tributary inlet ] 93cbcc0c14f05402aa92 by ramnathv

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[{"name":"simple-statistics","url":"http://www.macwright.org/simple-statistics/simple_statistics.js"}],"fileconfigs":{"inlet.js":{"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}

inlet.js

var data = [{"x":80,"y":125.5186},{"x":66,"y":165.9907},{"x":74,"y":140.6672},{"x":98,"y":175.9257},{"x":74,"y":105.7128},{"x":95,"y":145.2141},{"x":96,"y":201.7928},{"x":81,"y":190.212},{"x":70,"y":193.6891},{"x":57,"y":124.2003},{"x":97,"y":110.0359},{"x":65,"y":156.7633},{"x":53,"y":138.023},{"x":98,"y":163.1632},{"x":86,"y":129.248},{"x":57,"y":122.1023},{"x":78,"y":176.8609},{"x":98,"y":103.1171},{"x":79,"y":146.7252},{"x":70,"y":151.4444}] 
var fit = ss.linear_regression()
  .data(data.map(function(d){return [d.x, d.y]}))
  .line()

var w = 587, h = 381

var margin = {top: 63, bottom: 11, left: 85, right: 20}
var svg = make_svg_container(w, h, margin)


var xScale = d3.scale.linear()
  .range([0, w - margin.left - margin.right])
  .domain(d3.extent(data, I("x")))


var yScale = d3.scale.linear()
  .range([h - margin.top - margin.bottom, 0])
  .domain(d3.extent(data, I("y")))


svg.selectAll("circle")
  .data(data).enter()
  .append('circle')
    .attr('cx', I('x', xScale))
    .attr('cy', I('y', yScale))
    .attr('r', 3)

var line = d3.svg.line()
.x(I("x", xScale))
.y(function(d){return yScale(fit(d.x))})
   
svg.append('path')
  .datum(data)
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "steelblue")

function make_svg_container(w, h, margin, fill){
  var margin = {top: 20, right: 30, bottom: 30, left: 40},
	   width = w - margin.left - margin.right,
	   height = h - 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 + ")")
    
  
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", fill || "#ddd")

  return svg
}
   
function I(x, f){
  return function(d){
    if(typeof(f)==='undefined'){ 
      f = function(x){return x}
    };
    console.log(f)
    return f(d[x])
  }
}