var startPoint = 5

//___________For now only the startPoint is changeable ___________
var distance = 48

createBar(startPoint+distance*6, 121, 5,-103,-105)
createBar(startPoint+distance*7, 121, 5,-103,-105)


createBar(startPoint+distance*3, 174, 2)
createBar(startPoint+distance*4, 174, 3)
createBar(startPoint+distance*5, 174, 4)
createBar(startPoint+distance*6, 174, 5)
createBar(startPoint+distance*7, 174, 6)



function createBar(startX,startBarY,index, tX,tY){
  var startY = 28
  var barWidth = 20
  var barHeight = 150


  console.log(index)
  var g = d3.select('svg').append('g')
  g.append('rect')
        .attr('height',25)
        .attr('width',20)
        .attr('fill','darkgrey')
        .attr('transform','skewY(30)skewX(-40.5) translate('+startX+','+startY+')')

    g.append('rect')
        .attr('height',barHeight)
        .attr('width',barWidth)
        .attr('x',startX-46)
        .attr('y',startY+26)
        .attr('fill','grey')
        .attr('transform','skewY(30)')

    g.append('rect')
        .attr('height',barHeight)
        .attr('width',barWidth)
        .attr('x',startX-25)
        .attr('y',startY+(startX*1.12)+(0.2*(Math.pow(index,2))))
        .attr('fill',"#AD9595")
        .attr('transform','skewY(-30)')
      if(tX && tY){
     	g.attr('transform','translate('+tX+','+tY+')')
      }

}