Tributary inlet

_.md

[ Launch: Tributary inlet ] 8789794 by johnhamm

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"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}

inlet.js

var datas = [33, 20, 65, 80, 45, 50];
var labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

var svg = d3.select("svg");

var group = svg.append("g")
  .attr("transform", "translate(" + [13, 100] + ")");
var tb = bar()
  .data(datas)
  .labels(labels)
  .max(100)
    
tb(group);



function bar() {
    var width = 400;
    var height = 200;
    var color_scale = d3.scale.category20();
    var stroke = "#000000";
    var stroke_opacity = 0.2;
    var stroke_width = 1;
    var fill_opacity = 0.69;
    var data;
    var chart;
	var max = 0;
	var labels;

    chart = function(g) {
      
     //optional bounding box of chart
      g.append("rect")
        .attr("width", width)
        .attr("height", height)
        .attr("fill", "none")
        .attr("stroke", stroke)
        .style("stroke-opacity", stroke_opacity)
      
      
        
      	var ymax = max;
      	if(!max) {
        	ymax = d3.max(data);
        }
        var yscale = d3.scale.linear()
            .domain([0, ymax])
            .range([0, height]);
	
        var xscale = d3.scale.ordinal()
            .domain(d3.range(data.length))
            .rangeBands([0, width], 0.3);

        //create the DOM elements!
        var bars = g.selectAll("rect.bars")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bars");
        
        bars.attr("width", function(d, i) {
            return xscale.rangeBand();
        })
        .attr("height", function(d,i) {
            return yscale(d);
        })
        .attr("transform", function(d,i) {
            var tx = xscale(i);
            var ty = height - yscale(d);
            return "translate(" + [tx, ty] + ")";
        })
        .style("fill", function(d,i) {
            return color_scale(i);
        })
        .style("fill-opacity", fill_opacity)
        .style("stroke", stroke)
        .style("stroke-opacity", stroke_opacity)
        .style("stroke-width", stroke_width)
        ;
      
      if(labels) {
        
        var lbls = g.selectAll("text.labels")
        .data(labels);
      lbls.enter()
        .append("text");
      
      lbls.text(function(d) {
        return d;
      })
      .attr("transform", function(d,i) {
        var x = xscale(i) + xscale.rangeBand()/2;
        var y = height + 19;
        return "translate(" + [x,y] + ")" + "rotate(" + 0 + ")";
      })
      .style("text-anchor", "middle");
      
      }

    };
    chart.data = function(value){
        if (!arguments.length) { return data; }
        data = value;
        return chart;
    };
  
  	chart.labels = function(value){
        if (!arguments.length) { return labels; }
        labels = value;
        return chart;
    };
  
  	chart.max = function(value){
        if (!arguments.length) { return max; }
        max = value;
        return chart;
    };

    chart.width = function(value) {
        if (!arguments.length) { return width; }
        width = value;
        return chart;
    };

    chart.height = function(value) {
        if (!arguments.length) { return height; }
        height = value;
        return chart;
    };

    chart.color_scale = function(value) {
        if (!arguments.length) { return color_scale; }
        color_scale = value;
        return chart;
    };

    return chart;
};