title: Grouping SVG elements in D3
body: <p>I've implemented a car into my D3. Info graphic. However; It's quite large in my container and it's not animated. I'd like to group these elements then, scale it down, &amp; finally animate it to move in a loop or continuously. Basically make the car much smaller, where it could animate around the page freely.</p>
  
  <pre><code>d3.select('#dataVizContainer svg').append("rect")
      .attr('id', 'rect1')
      .attr("fill", "transparent")
      .attr("stroke", "#99C863")
      .style('stroke-width', '10px')
      .attr("width", 210)
      .attr("height", 130)
      .attr("opacity", 0)
      ;
  
  d3.select('#rect1')
      .transition()
      .attr("x", 70)
      .attr("y", 10)
      .attr('rx', 150)
      .attr("fill", "transparent")
  
      .delay(2000)
      .duration(12000)
      .attr("opacity", 1);
  
  
  d3.select('#dataVizContainer svg').append('line').attr('id', 'line')
      .attr('x1', 145).attr('y1', 10).attr('x2', 145).attr('y2', 80)
      .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0);
  //Animation
  d3.select('#line')
      .transition()
      .delay(2000)
      .duration(12000)
      .attr("opacity", 1);
  
  d3.select('#dataVizContainer svg').append('line').attr('id', 'line2')
      .attr('x1', 215).attr('y1', 10).attr('x2', 215).attr('y2', 80)
      .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0);
  //Animation
  d3.select('#line2')
      .transition()
      .delay(2000)
      .duration(12000)
      .attr("opacity", 1);
  
  
  d3.select('#dataVizContainer svg').append("rect")
      .attr('id', 'rect2')
      .attr("fill", "transparent")
      .attr("stroke", "#8C8C93")
      .style('stroke-width', '10px')
      .attr("width", 340)
      .attr("height", 80)
      .attr("opacity", 0)
      ;
  d3.select('#rect2')
      .transition()
      .attr("x", 10)
      .attr("y", 70)
      .attr('rx', 30)
      .attr("fill", "#8C8C93")
      .delay(2000)
      .duration(8000)
      .attr("opacity", 1);
  
  d3.select('#dataVizContainer svg').append("rect")
      .attr('id', 'rect3')
      .attr("fill", "transparent")
      .attr("stroke", "crimson")
      .style('stroke-width', '10px')
      .attr("width", 40)
      .attr("height", 20)
      .attr("opacity", 0)
      ;
  d3.select('#rect3')
      .transition()
      .attr("x", 0)
      .attr("y", 110)
      .attr('rx', 10)
      .attr("fill", "#999")
  
      .delay(2000)
      .duration(12000)
      .attr("opacity", 1);
  
  d3.select('#dataVizContainer svg').append("rect")
      .attr('id', 'rect4')
      .attr("fill", "transparent")
      .attr("stroke", "crimson")
      .style('stroke-width', '10px')
      .attr("width", 40)
      .attr("height", 20)
      .attr("opacity", 0)
      ;
  
  //Draw the Rectangle
  d3.select('#rect4')
      .transition()
      .attr("x", 325)
      .attr("y", 110)
      .attr('rx', 10)
      .attr("fill", "#999")
  
      .delay(2000)
      .duration(12000)
      .attr("opacity", 1);
  // Left wheel 
  d3.select('#dataVizContainer svg').append('circle')
      .attr('id', 'C14')
      .attr('cx', 90)
      .attr('cy', 140)
      .attr('r', 40)
      .style('stroke-width', '7px')
      .attr("opacity", 0)
      ;
  
  d3.select('#C14')
      .transition()
      .attr("r", "40")
      .delay(4000)
      .ease(d3.easeBounce)
      .duration(12000)
      .attr("opacity", 1)
      .attr("fill", "#222")
      ;
  
  // Rims of the Left Wheel 
  d3.select('#dataVizContainer svg').append('circle')
      .attr('id', 'C15')
      .attr('cx', 90)
      .attr('cy', 140)
      .attr('r', 15)
      .attr("opacity", 0)
      ;
  
  d3.select('#C15')
      .transition()
      .delay(7000)
      .ease(d3.easeBounce)
      .duration(12000)
      .attr("opacity", 1)
      .attr("fill", "#555")
      .attr("r", "15")
  
      ;
  
  //Left Wheel Code Ended
  
  //Right Wheel Started 
  d3.select('#dataVizContainer svg').append('circle')
      .attr('id', 'C16')
      .attr('cx', 270)
      .attr('cy', 140)
      .attr('r', 40)
      .style('stroke-width', '7px')
      .attr("opacity", 0)
      ;
  
  d3.select('#C16')
      .transition()
      .attr("r", "40")
      .delay(4000)
      .ease(d3.easeBounce)
      .duration(12000)
      .attr("opacity", 1)
      .attr("fill", "#222")
      ;
  
  // Rims of the Right Wheel 
  d3.select('#dataVizContainer svg').append('circle')
      .attr('id', 'C17')
      .attr('cx', 270)
      .attr('cy', 140)
      .attr('r', 15)
      .attr("opacity", 0)
      ;
  
  d3.select('#C17')
      .transition()
      .delay(7000)
      .ease(d3.easeBounce)
      .duration(12000)
      .attr("opacity", 1)
      .attr("fill", "#555")
      .attr("r", "15")
  
      ;
  //Right Wheel Code Ended
  </code></pre>