Как в D3.Js сделать из Bar Chart группу?

Question

[Ninja Mate]

jsfiddle.net/ninjamate/etpu3jrc/1 вот такая версия есть сейчас
хочу добавить второй bar под тем же лейблом, не могу сообразить как

var dataArray = [{"name":"CABOOLTURE","number":"354", "dos":"33"},
{"name":"KILCOY","number":"15", "dos":"62"},
{"name":"PINE","number":"352", "dos":"24"},
{"name":"RBWH","number":"1840", "dos":"63"},
{"name":"REDCLIFFE","number":"197", "dos":"69"},
{"name":"TPCH","number":"1578", "dos":"43"}];



var max = d3.max(dataArray, function(d) { return parseInt(d.number); } );

var MyWidth = 700;

        var margin = {top: 20, right: 5, bottom: 30, left: 53},
            width = MyWidth - margin.left - margin.right,
            height = ( (width*0.75) - margin.top - margin.bottom );

        var yScale = d3.scale.linear()
            .domain([0, max])
            .range([0, height]);

        var colors = d3.scale.linear()
            .domain([0, max])
            .range(["#269", "#fa1"]);

        var xScale = d3.scale.ordinal()
            .domain(d3.range(0, dataArray.length))
            .rangeBands([0, width]);

        var tooltip = d3.select('body').append('div')
            .style('position', 'absolute')
            .style('background', '#fff')
            .style('padding', '8 21px')
            .style('border', '2px rgba(0, 0, 0, 0.74) solid')
            .style('border-radius', '5px')
            .style('opacity', '0')
            .style('font-size', 'large');

        var animateDuration =0,
            animateDelay = 0;

//SVG element
        var myChart = d3.select('#chart').append("svg")
            .attr("class", 'myChart')
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("background", 'rgba(200, 200, 200, 0.04)')
            .append('g')
            .attr('transform', 'translate('+margin.left+','+margin.top+')')

            .selectAll("rect")
            .data(dataArray)
            .enter().append("rect")
            .style("fill", function (d) { return colors( parseInt(d.number) ) })
            .attr("width", xScale.rangeBand()-2 )
            .attr("height", function (d) { return yScale( parseInt(d.number) ) })
            .attr("x", function (d, i) { return xScale(i) })
            .attr("y", height)
            .attr("id", function(d,i){ return ('rect'+ i); })// each rect has unique id
            .attr("class", function(){
                return 'hand';
            })// add hand class for extended
            .on('mouseover', function(d){
                tooltip.transition().duration(500)
                    .style('opacity', 0.9);

                tooltip.html(d)
                    .style('left', ((d3.event.pageX) +'px'))
                    .style('top', ((d3.event.pageY-80) +'px'))
                    .html(function() {
                        return "<strong>" +d.name + "</strong> <span style='color:red'>" + d.number + "</span>"
                    });

                d3.select(this)
                    .style('opacity', 0.5)
            })
            .on('mouseout', function(){
                tooltip.transition().duration(200)
                    .style('opacity', 0);

                d3.select(this)
                    .style('opacity', 1)
            });

        //Animation
        myChart.transition()
            .attr('height', function(d){ return yScale( parseInt(d.number) ) })
            .attr('y', function(d){ return height - yScale( parseInt(d.number) ) })
            .duration(animateDuration)
            .delay(function (d, i) { return i*animateDelay })
            .ease('InBack');

        var vScale = d3.scale.linear()
            .domain([0, max])
            .range([height, 0]);
            
            var hScale = d3.scale.ordinal()
            .domain(dataArray.map(function(d) { return d.name; }))
            .rangeBands([0, width]);

        var vAxis = d3.svg.axis()
            .scale(vScale)
            .orient('left')
            .ticks(5)
            .tickFormat(d3.format("d"))
            .tickSubdivide(0)
            .tickPadding(5);

        var vGuide = d3.select('svg')
            .append('g');
        vAxis(vGuide);
        vGuide.attr('transform', 'translate('+ margin.left + ','+margin.top+')' );
        vGuide.selectAll('path')
            .style('fill', 'none')
            .style('stroke', '#ffffff');
        vGuide.selectAll('line')
            .style('fill', '#ffffff');

        var hAxis = d3.svg.axis()
            .scale(hScale)
            .orient('bottom');


        var hGuide = d3.select('svg')
            .append('g');
            
        hAxis(hGuide);
        
        hGuide.attr('transform', 'translate('+ margin.left + ','+(height + margin.top)+')' );
        
        hGuide.selectAll('path')
            .style('fill', 'none')
            .style('stroke', '#ffffff');
        hGuide.selectAll('line')
            .style('fill', '#ffffff');