BAR CHART WITH PATH

_.md

[ Launch: BAR CHART WITH PATH ] 10333132 by roundrobin
[ Launch: BAR CHART ROUNDED CORNERS ] 10328461 by roundrobin
[ Launch: Tributary inlet ] 10328184 by roundrobin

config.json

{"description":"BAR CHART WITH PATH","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}},"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/feqIuhG.png"}

inlet.js

function chart(config) {
  var width = config.width || 500, // default width
      height = config.height || 500; // default height

  var x = config.x || 0;
  var y = config.y || 0;

  var data = config.data || [];

  var margin = {top: 10, left: 10, bottom: 10, right: 10};

  var innerHeight = height - margin.top - margin.bottom;
  var innerWidth = width - margin.left - margin.right; 
  
  
  var pad = 0.5;
  var pad1 = 1 - pad;
  var pad2 = pad;
  
  //Scales
  var xScale = d3.time.scale();
  var yScale = d3.scale.linear();
  var rangePoints = d3.scale.ordinal()
  	 .domain(d3.range(data.length))
  	.rangePoints([0, innerWidth], pad1);

  var o = d3.scale.ordinal().domain(data).rangeBands([0, innerWidth], pad2, 0);

   
  var offsetX = 0;
  var offsetY = 0;

  var rx = 5;
  var ry = 5;
  var borderRadius = 0;
  var barWidth = (o.rangeBand() - rx*2);
  

 
  var borderRadius = 5;

  function bar(selection) {
    // generate chart here, using `width` and `height`
    //console.log("Initialized", selection.data(), data);

    var g;
    if(!config.container){
      g = d3.select("svg");
    }else{
      g = config.container;  
    }
    
    g = g.append("g")
    .attr({
        "class" : "chart",
        "transform" : "translate("+(x+margin.left)+","+(y)+")"
    });



    xScale.domain([0, data.length]).range([0, innerWidth]);
    yScale.domain([0, d3.max(data)]).range([0, innerHeight - ry]);
   
    
    g.append('line')
      .attr({
         stroke: "white",
         "stroke-width":0.5,
         fill: "none",
         x1: 0,
         x2: innerWidth,
         y1: innerHeight,
         y2: innerHeight
    });
     
   var barGroup = g.selectAll('.bars') 
   .data(data)
   .enter()
    .append("g");

  var attrs = {
    fill: "#2E3C46",
    stroke: "none",
    "stroke-width": "1"
  };

  barGroup.append("path")
  .attr(attrs)
  .attr({
    d: function(d,i){
      //console.log("i", i, o.range()[i],innerWidth);
      var path = "M"+(offsetX+o.range()[i])+","+(offsetY+innerHeight);
          path += "l"+0+""+(-yScale(d));
          path += "s0,"+-borderRadius+" "+rx+" "+-ry;
          path += "l"+(barWidth)+" "+0;    
          path += "s"+(borderRadius)+" 0 "+rx+" "+ry;    
          path += "l"+0+" "+(yScale(d));
          path += "Z";    
      return path;
    
    }
  });

  barGroup.append("text")
  .attr({
    x:function(d,i){ 
      return rangePoints(i)
    },
    y:function(d,i){ 
      return height - yScale(d) - 35;
    }    
  })
  .style({
    fill:"#2E3C46",
    "text-anchor" : "middle"
    
  })
  .text(function(d,i){
  	return d+"%";
  });
    

  }

  bar.data = function(value) {
    if (!arguments.length) return data;
    data = value;
    return bar;
  };


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

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

  return bar;
}

var config = {width: 502,height: 200, y: 50, data: [1, 20, 30, 4, 10, 6]}
var barChart = chart(config)

g.selectAll(".bars")
.call(barChart);