BAR CHART WITH PATH

_.md

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

inlet.js

var data = [10, 1, 2, 1, 4, 1];
 var margin = {top: 10, left: 0, bottom: 10, right: 0};
var height = 400;
var width = 500;

var xScale = d3.scale.linear();
var yScale = d3.scale.linear();

var borderRadiusX = 20;

var borderRadiusY = (20);


xScale.domain([0, data.length]).range([0, width]);
yScale.domain([0, d3.max(data)]).range([0, height - margin.top - margin.bottom]);
    

var barGroup = g.selectAll('.bars') 
   .data(data)
   .enter()
    .append("g");




d3.select("body").style({background: "#061B24"})


var offsetX = 100;
var offsetY = 100;

var o = d3.scale.ordinal().domain(data).rangeBands([0, width], 0.5, 0);
o.rangeBand();
o.range();
o.rangeExtent();



var u = 0; 
var rx = 10;
var ry = 10;
var borderRadius = 10;
var barWidth = o.rangeBand()/2;


var attrs = {
  fill: "#384252",
  stroke: "white",
  "stroke-width": "1"
};

barGroup.append("path")
.attr(attrs)
.attr({
  d: function(d,i){
    var path = "M"+(offsetX+xScale(i))+","+(offsetY+height);
        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;
  
  }
});