Tributary inlet

_.md

[ Launch: Tributary inlet ] 7c09a4a4b1fc804858f1 by ramnathv

app.css

.area {
  fill: steelblue;
  opacity: 0.5;
  stroke: steelblue;
}

.line {
  fill: none;
  stroke: steelblue;
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"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/AsAswiP.png"}

inlet.js

// Helper function ////////////////////////////////////                       
var createAccessors = function(visExport) {
    for (var n in visExport.opts) {
        if (!visExport.opts.hasOwnProperty(n)) continue;
        visExport[n] = (function(n) {
            return function(v) {
                return arguments.length ? (visExport.opts[n] = v, this) : visExport.opts[n];
            }
        })(n);
    }
}; 

var data = [1, 4, 2, 3, 5]


var w = 450, 
    h = 327

function drawChart(){
  var margin = {top: 20, bottom: 20, left: 20, right: 50},
    width = w - margin.left - margin.right,
    height = h - margin.top - margin.bottom
  
  var chart = d3.select('svg')
      .attr('width', w)
      .attr('height', h)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  
  var x = d3.scale.linear().range([0, width]),
    y = d3.scale.linear().range([height, 0])
  
  x.domain([1, 5])
  y.domain([1, 5])
  
  var line = d3.svg.line()
    .x(function(d, i){return x(i + 1)})
    .y(function(d, i){return y(d)})
  
  var area = d3.svg.area()
    .x(function(d, i){return x(i + 1)})
    .y0(height)
    .y1(function(d, i){return y(d)})
  
  chart.append("path")
     .datum(data)
     .attr("class", "line")
     .attr("d", line)
  
  chart.append("path")
    .attr("class", "area")
    .attr("d", area(data))
}

  var Chart = function module(){
    var opts = {
      margin: {top: 20, bottom: 20, left: 20, right: 50},
      width: 607,
      height: 320,
      interpolate: "basis"
    }
    
    
      
    function exports(selection){
      opts.W = opts.width - opts.margin.left - opts.margin.right
      opts.H = opts.height - opts.margin.top - opts.margin.bottom
      var x = d3.scale.linear().range([0, opts.W]),
        y = d3.scale.linear().range([opts.H, 0])
      
      selection.each(function(data){
        x.domain([1, 5])
        y.domain([1, 5])
        
        var chart = d3.select(this)
          .attr('width', opts.width)
          .attr('height', opts.height)
        .append("g")
          .attr("transform", "translate(" + opts.margin.left + "," + opts.margin.top + ")")
      
        var line = d3.svg.line()
          .interpolate(opts.interpolate)
          .x(function(d, i){return x(i + 1)})
          .y(function(d, i){return y(d)})
  
        var area = d3.svg.area()
          .interpolate(opts.interpolate)
          .x(function(d, i){return x(i + 1)})
          .y0(opts.height)
          .y1(function(d, i){return y(d)})
    
        chart.append("path")
           .datum(data)
           .attr("class", "line")
           .attr("d", line)
        
        chart.append("path")
          .attr("class", "area")
          .attr("d", area(data))
          
      })
    
    }
    exports.opts = opts
    createAccessors(exports, opts);
    return exports
  }
  
  

var chart = Chart().width(674).interpolate('step-before')

d3.select('svg').datum(data).call(chart)