Tributary inlet

_.md

[ Launch: Tributary inlet ] 1eb7d984a78c1ee36ea3 by ramnathv

app.css

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.area {
  fill: lightsteelblue;
  stroke-width: 0;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font-size: 10px; 
}

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/NKXg80g.png"}

inlet.js

var data = [[4, 29], [9, 51], [10, 16], [70, 83]],
  data2 = [data, data, data]

var margin = {top: 73, bottom: 20, left: 20, right: 20},
    width = 550 - margin.left - margin.right,
    height = 339 - margin.top - margin.bottom,
    height2 = height/(data2.length + 1),
    width2 = width/(data2.length + 1)

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

var container = svg
   .append("g")
     .attr("class", "container")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")")


var x = d3.scale.linear().range([0, width2]),
    y = d3.scale.linear().range([height2, 0])


var xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(3)


x.domain(d3.extent(data, function(d){return d[0]}))
//x.domain([0, d3.max(data, function(d){return d[0]})])
//y.domain([0, d3.max(data, function(d){return d[1]})])
y.domain(d3.extent(data, function(d){return d[1]}))

var line = d3.svg.line()
  .interpolate('basis')
  .x(function(d){return x(d[0])})
  .y(function(d){return y(d[1])})

var area = d3.svg.area()
  .interpolate('basis')
  .x(function(d){return x(d[0])})
  .y0(height2)
  .y1(function(d){return y(d[1])})

/*

container.append("path")
  .datum(data)
  .attr("class", "area")
  .attr("d", area)

container.append("path")
  .attr("class", "line")
  .attr("d", line(data))
  
*/

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1)
    .domain(d3.range(data2.length))
    
data2.forEach(function(data, group){
  var container2 = container.append("g")
    .attr("transform", "translate(" + x0(group) + ",0)")
    
 container2.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)

 /*
 container2.append("path")
  .attr("class", "line")
  .attr("d", line(data))
 */
 
 container2.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height2 + ")")
   .call(xAxis)
})