Tributary inlet

_.md

[ Launch: Tributary inlet ] 3ddba3dc172866d3eb9b by ramnathv

app.css

.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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"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/rhggtbd.png"}

inlet.js

// using margin conventions by bostock
var margin = {top: 66, bottom: 26, left: 27, right: 20},
    width = 741 - margin.left - margin.right,
    height = 423 - margin.top - margin.bottom,
    height2 = height/3


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

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


var x = d3.scale.ordinal().rangeRoundBands([0, width/4], 0.1),
    y = d3.scale.linear().range([height2, 0]),
    x0 = d3.scale.ordinal().rangeRoundBands([0, width], 0.1, 0),
    color = d3.scale.category20(),
    y0 = d3.scale.ordinal().rangeRoundBands([height, 0], 0.1)


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


var data = [10, 20, 30, 42, 60, 300, 400],
    data2 = [data, data, data],
    data3 = [data2, data2]

y.domain([0, d3.max(data)])
x.domain(d3.range(data.length))
x0.domain(d3.range(data2.length))
y0.domain(d3.range(data3.length))


// there are two ways to create small multiples

/*

var bars2 = chart.selectAll("g")
     .data(data2).enter()
   .append("g")
     .attr("transform", function(d, i){
        return "translate(" + x0(i) + ", 0)"
     })


bars2.selectAll("rect")
     .data(function(d){return d}).enter()
   .append("rect")
     .attr("x", function(d, i){return x(i)})
     .attr("y", function(d){return y(d)})
     .attr("height", function(d){return height - y(d)})
     .attr("width", x.rangeBand())
     .attr("fill", function(d, i){return color(i)})

*/


/*
data2.forEach(function(data, group){
  var container = chart.append("g")
      .attr("transform", "translate(" + x0(group) + ", 0)")
      
  container.selectAll("rect")
      .data(data).enter()
    .append("rect")
     .attr("x", function(d, i){return x(i)})
     .attr("y", function(d){return y(d)})
     .attr("height", function(d){return height2 - y(d)})
     .attr("width", x.rangeBand())
     .attr("fill", function(d, i){return color(i)})
  
  container.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height2 + ")")
    .call(xAxis)

})

*/


/*
data3.forEach(function(data2, group2){
  var container0 = chart.append("g")
    .attr("transform", "translate(0," + y0(group2) + ")")
    
  data2.forEach(function(data, group){
    var container = container0.append("g")
        .attr("transform", "translate(" + x0(group) + ", 0)")
        
    container.selectAll("rect")
        .data(data).enter()
      .append("rect")
       .attr("x", function(d, i){return x(i)})
       .attr("y", function(d){return y(d)})
       .attr("height", function(d){return height2 - y(d)})
       .attr("width", x.rangeBand())
       .attr("fill", function(d, i){return color(i)})
    
    container.filter(function(d, i){return group2 === 0}).append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis)
   })

})
*/

barChart(data)
function barChart(data){
  var margin = {top: 19, bottom: 23, left: 27, right: 20},
    width = 200 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom


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

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


  var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1),
    y = d3.scale.linear().range([height, 0]),
    color = d3.scale.category20()


  var xAxis = d3.svg.axis().scale(x).orient('bottom')
  
  y.domain([0, d3.max(data)])
  x.domain(d3.range(data.length))
 
  chart.selectAll("rect")
       .data(data).enter()
     .append("rect")
       .attr("x", function(d, i){return x(i)})
       .attr("y", function(d){return y(d)})
       .attr("height", function(d){return height - y(d)})
       .attr("width", x.rangeBand())
       .attr("fill", function(d, i){return color(i)})
    
    chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      
    return chart

}



/*
var bars = chart.selectAll("rect")
    .data(data).enter()
  .append("rect")
    .attr("x", function(d, i){return x(i)})
    .attr("y", function(d){return y(d)})
    .attr("height", function(d){return height - y(d)})
    .attr("width", x.rangeBand())
    .attr("fill", "steelblue")
*/