function drugBarGroup(chartArea){
	 d3.select('#drugBar-area').html('');
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scaleBand()
    .rangeRound([0, width]).padding(0.2);

var x1 = d3.scaleBand();

var y = d3.scaleLinear()
    .range([height, 0]);

var xAxis = d3.axisBottom()
    .scale(x0)
    .tickSize(0);

var yAxis = d3.axisLeft()
    .scale(y);
  

var color = d3.scaleOrdinal()
    .range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);

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

d3.csv("drug1.csv", function(error, data) {
  if (error) throw error;
 
   // Format the data
  data.forEach(function(d) {
     d.s_category = d.s_category;
     d.drug_cat = d.drug_cat;
  });
  
  

  var categoriesNames = data.map(function(d) { return d.drug_cat; }).sort(function(a,b){return a - b});
  var rateNames = data.map(function(d) { return d.s_category; });

  x0.domain(categoriesNames);
  x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
  
  const nestedData = d3.nest()
  	.key(function(d){return d.drug_cat})
    .key(function(d){return d.s_category})
    .rollup(function(leaves) { return leaves.length; })
  	.entries(data);

  
 
  y.domain([0, d3.max(nestedData, function(s_category) { 
      return d3.max(s_category.values, 
                    function(d) { 
                        return d.value; }); })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .style('opacity','0')
      .call(yAxis)
  .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style('font-weight','bold')
      .text("Value");

  svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');

  var slice = svg.selectAll(".slice")
      .data(nestedData)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform",function(d) { return "translate(" + x0(d.key) + ",0)"; });

  slice.selectAll("rect")
      .data(function(d) { return d.values; })
  .enter().append("rect")
      .attr("width", x1.bandwidth())
      .attr("x", function(d) { return x1(d.key); })
      .style("fill", function(d) { return color(d.key) })
      .attr("y", function(d) { return y(0); })
      .attr("height", function(d) { return height - y(0); })
      .on("mouseover", function(d) {
          d3.select(this).style("fill", d3.rgb(color(d.key)).darker(2));
      })
      .on("mouseout", function(d) {
          d3.select(this).style("fill", color(d.key));
      });

  slice.selectAll("rect")
      .transition()
      .delay(function (d) {return Math.random()*1000;})
      .duration(1000)
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

});
	
}
drugBarGroup("#drugBar-area");