BAR CHART ROUNDED CORNERS

_.md

[ Launch: Tributary inlet ] 10328184 by roundrobin

config.json

{"description":"BAR CHART ROUNDED CORNERS","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/yi09MAX.png"}

inlet.js

var data = [0,1,2,3,4,5];
 var margin = {top: 10, left: 0, bottom: 10, right: 0};
var height = 200;
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 o = d3.scale.ordinal().domain(data).rangeBands([50, width]);
o.rangeBand();
o.range();
o.rangeExtent();

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


    var attrs = {
        width: function(d, i){
          return o.rangeBand();
        },
        height: function(d, i){
          return yScale(d);
        },
        fill: "#384252",
        x: function(d, i){
          return xScale(i);
        },
        y: function(d, i){
          return height - yScale(d) - margin.bottom;
        }
      };
  

  

    barGroup.append("rect")
    .attr(attrs)
    .attr({ry : borderRadiusX, rx : borderRadiusY });