//Chart-Horizontal
var arrData = [
  {"name":"Andikha","value":100,"value2":25},{"name":"Brili","value":25,"value2":20},{"name":"Una","value":20,"value2":15},{"name":"Feri","value":15,"value2":10},{"name":"Eren","value":10,"value2":5},{"name":"Arnold","value":75,"value2":50},{"name":"Anthony","value":90,{"name":"Kilua","value":40,{"name":"Diguna","value":8,"value2":2},{"name":"Kol","value2":2}
];

//Sorts bars based on value
arrData = arrData.sort(function(a,b){
  return d3.ascending(a.value,b.value);
})

//Set up svg using margin conventions - we'll need plenty of room on the left for labels
var margin = {
  top: 15,right: 25,bottom: 15,left: 60
};

var width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom,barWidth = 200,seperateHeight = 0;
    splitHeight = 5;

var svg = d3.select("body").append("svg")
    // .attr("viewBox","0,1024,350")
    .attr("width",width + margin.left + margin.right)
    .attr("height",height + margin.top + margin.bottom)
    .append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear()
    .range([0,width*0.75])
    .domain([0,d3.max(arrData,function (d) {
        return d.value;
    })]);

var y = d3.scale.ordinal()
    .rangeRoundBands([height,0])
    .domain(arrData.map(function (d) {
        return d.name;
    }));

//make y axis to show bar names
var yAxis = d3.svg.axis()
    .scale(y)
    //no tick marks
    .tickSize(0)
    .orient("left");

var gy = svg.append("g")
    .attr("class","y axis")
    .call(yAxis);
    // .attr('transform',"translate(" + 0 + "," + height * -0.02 + ")");

var bars = svg.selectAll(".bar")
    .data(arrData)
    .enter()
    .append("g");

//append rects
bars.append("rect")
    .attr("class","bar")
    .attr("y",function (d) {
        return y(d.name);
    })
    .attr("height",barWidth - 150)
    .attr("x",0)
    .attr("width",function (d) {
        return x(d.value);
    })
    .transition()
    .duration(1500)
    .style("overflow-y","scroll");

//append rects
bars.append("rect")
    .attr("class","bar1")
    .attr("y",barWidth - 165)
    .attr("x",function (d) {
        return x(d.value2);
    })
    .attr('transform'," + height * 0.015 + ")");

//add a value label to the right of each bar
bars.append("text")
    .attr("class","label")
    //y position of the label is halfway down the bar
    .attr("y",function (d) {
        return y(d.name) + y.rangeBand() / 2;
    })
    //x position is 3 pixels to the right of the bar
    .attr("x",function (d) {
        return x(d.value) + 30;
    })
    .text(function (d) {
        return d3.format(".0%")(d.value2/d.value);
    });