Not sure what you mean by :

I want to create 2 bar charts side by side from this data.

  1. If you want to duplicate the same chart, you can use SVG 'use' element :

  2. If your question is about positioning two charts next to each other, wrap your charts in containers, and translate the second container next to the first :

    var container1 = svg.append('g')
    var container2 = svg.append('g')
                             .attr('id', 'container2');
              //Create the chart1 here
              //Create the chart2 here
    container2.attr('transform','translate('+ svgWidth/2 +',0)'); //To move the g container to the right.

where svgWidth is the width you gave to your svg, assuming your charts use half of the width for themselves.

Hope that answers your question !

Related Query

More Query from same tag