const render = (function () {
  const svg = d3.select('svg')
  const vis = svg.select('#vis')
  const width = +svg.attr('width')
  const height = +svg.attr('height')

  const xScale = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 500])

  // append wrap
  const wrap = vis.append('g')
    .attr('class', 'ratio-wrap')

  // append first rect
  const firstRect = wrap.append('rect')
    .attr('height', 88)
    .attr('x', 0)
    .attr('y', height / 2 - 50)
    .style('fill', '#fbae17')

  // append second rect
  const secondRect = wrap.append('rect')
    .attr('height', 88)
    .attr('x', 0)
    .attr('y', height / 2 - 50)
    .style('fill', '#0095a3')
  
  // append third rect
  const thirdRect = wrap.append('rect')
    .attr('height', 88)
    .attr('x', 0)
    .attr('y', height / 2 - 50)
    .style('fill', '#0da300')
  
  // append fourth rect
  const fourthRect = wrap.append('rect')
    .attr('height', 88)
    .attr('x', 0)
    .attr('y', height / 2 - 50)
    .style('fill', '#6f00a3')
  
  // append fifth rect
  const fifthRect = wrap.append('rect')
    .attr('height', 88)
    .attr('x', 0)
    .attr('y', height / 2 - 50)
    .style('fill', '#a30010')
  
  // append sixth rect
  const sixthRect = wrap.append('rect')
    .attr('height', 88)
    .attr('x', 0)
    .attr('y', height / 2 - 50)
    .style('fill', '#a3007d')
  
  
  // append values
  const label1 = vis.append('text')
    .attr('class', 'ratio-label')
  	.attr('y', height / 2 + 5)
    .style('text-anchor', 'middle')
    .style('font-size', '36px')
    .style('fill', '#dddddd')
  const label2 = vis.append('text')
    .attr('class', 'ratio-label')
  	.attr('y', height / 2 + 5)
    .style('text-anchor', 'middle')
    .style('font-size', '36px')
    .style('fill', '#dddddd')
  const label3 = vis.append('text')
    .attr('class', 'ratio-label')
  	.attr('y', height / 2 + 5)
    .style('text-anchor', 'middle')
    .style('font-size', '36px')
    .style('fill', '#dddddd')
  const label4 = vis.append('text')
    .attr('class', 'ratio-label')
  	.attr('y', height / 2 + 5)
    .style('text-anchor', 'middle')
    .style('font-size', '36px')
    .style('fill', '#dddddd')
  const label5 = vis.append('text')
    .attr('class', 'ratio-label')
  	.attr('y', height / 2 + 5)
    .style('text-anchor', 'middle')
    .style('font-size', '36px')
    .style('fill', '#dddddd')
  const label6 = vis.append('text')
    .attr('class', 'ratio-label')
  	.attr('y', height / 2 + 5)
    .style('text-anchor', 'middle')
    .style('font-size', '36px')
    .style('fill', '#dddddd')
  
  function xScaleAccumulator(data) {
    let accumXScale = [0];
    let tracker = 0;
    for (let i = 0; i < data.length; i++) {
      tracker += xScale(data[i]);
      accumXScale.push(tracker);
    }
    return accumXScale;
  }
  
  function getLabelPositions(data) {
    let positions = [];
    let tracker = 0;
    for (let i = 0; i < data.length; i++) {
      positions.push(tracker + (xScale(data[i]) / 2));
    	tracker += xScale(data[i]);
    }
    return positions
  }
  
  

  function update (data) {
    const accumXScale = xScaleAccumulator(data);
    const labelPositions = getLabelPositions(data);
    	// update the first rect
    firstRect.attr('width', xScale(data[0]))
    	// add the first label
    label1.attr('x', labelPositions[0])
    	.text(data[0])
    
      // update the second rect
    secondRect.attr('width', xScale(data[1]))
          // start the first rect after the first ends
        .attr('x', accumXScale[1])
    label2.attr('x', labelPositions[1])
    	.text(data[1])
    
    	//update the third rect
    thirdRect.attr('width', xScale(data[2]))
          // start the third rect after the second ends
        .attr('x', accumXScale[2])
    label3.attr('x', labelPositions[2])
    	.text(data[2])
    
    	//update the fourth rect
    fourthRect.attr('width', xScale(data[3]))
          // start the third rect after the second ends
        .attr('x', accumXScale[3])
    label4.attr('x', labelPositions[3])
    	.text(data[3])
    
    	//update the fifth rect
    fifthRect.attr('width', xScale(data[4]))
          // start the third rect after the second ends
        .attr('x', accumXScale[4])
    label5.attr('x', labelPositions[4])
    	.text(data[4])
    
    	//update the sixth rect
    sixthRect.attr('width', xScale(data[5]))
          // start the third rect after the second ends
        .attr('x', accumXScale[5])
    label6.attr('x', labelPositions[5])
    	.text(data[5])  
  }
  // expose the update
  return update
})()