Number of registered voters on voting sections chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg{
      margin: 20px;
    }
    p{
      margin-left: 60px
    }
    .tooltip{
     	position: absolute;
      max-width: 200px;
      pointer-events: none;
      background-color: green;
      color: #fff;
      padding:5px;
      border-radius: 5px;
      opacity: 0;
    }
  </style>
</head>

<body>
  <p>Number of registered voters on voting sections for Vaslui(2016 elections)</p>
  <div id="svgContainer"></div>
  <script>
    const width = 700;
    const height = 400;
    const margin = {top: 20, right: 20, bottom: 20, left: 70};
    
    const tooltip = d3.select('body')
    	.append('div')
    	.attr('class', 'tooltip');
    
    const svg = d3.select("#svgContainer")
    	.append('svg')
    	.attr('width', width)
    	.attr('height', height);
    
    //scales
    var xScale = d3.scaleBand()
    	.range([margin.left, width - margin.right - margin.left]);
    
    const yScale = d3.scaleLinear()
    	.range([height - margin.bottom -margin.top, 0]);
    
    //axes
     const xAxis = d3.axisBottom()
       .scale(xScale);
    
     const yAxis = d3.axisLeft()
     	.scale(yScale);
    
    
    const reload = function(){
      d3.csv('prezzenta-vot-7-10-vs.csv', (data) => {
        data.forEach(row => {
          row.VotantiLista = parseInt(row.VotantiLista, 10);
        })
        const filteredData = data.filter(row => row.Localitate.toLowerCase() === "vaslui");
        redraw(filteredData);
      });
    };
    
    const redraw = function(data){
      data.map(row => console.log(row));
      xScale.domain(data.map((d, i) => i));
      yScale.domain([0, d3.max(data, d => d.VotantiLista)]);
      
      const bars = svg.selectAll('rect.bar')
      	.data(data)
      	.enter()
      	.append('rect')
      	.attr('x', (d, i) => xScale(i))
      	.attr('y', yScale(0))
      	.attr('height', 0)
      	.on('mouseover', (d, i, n) => {
          tooltip.transition()
          	.duration(500)
          	.style('opacity', .9);
          tooltip.html(`<span>${d.VotantiLista} registered voters on ${d.NumeSectieVotare} voting section.</span>`)
          	.style('left', (d3.event.pageX +10) + 'px')
          	.style('top', (d3.event.pageY - 20) + 'px')
          //basic style of tooltip added as svg text
          //svg.append('text')
          	//.text(d.VotantiLista)
          	//.attr('text-anchor', 'middle')
          	//.attr('x', parseFloat(d3.select(n[i]).attr('x')) + parseFloat(d3.select(n[i]).attr('width')/2))
          	//.attr('y', d3.select(n[i]).attr('y'))
          	//.attr("id", `tooltip_${i}`)
        })
      	.on('mouseout', (d, i, n) => {
        	//d3.select(`#tooltip_${i}`).remove();
          tooltip.transition()
          	.duration(300)
          	.style('opacity', 0);
      	})
      	.transition()
      	.delay((d, i) => i * 50)
      	.duration(500)
      	.attr('y', d => yScale(d.VotantiLista))
      	.attr('width', xScale.bandwidth())
      	.attr('height', d => yScale(0) - yScale(d.VotantiLista))
      	.attr('fill', 'yellow')
      	.attr('stroke', '#000')
        
      	
      
			svg.append('g')
				.attr('transform', 'translate(' + [margin.left, 0] + ')')
				.call(yAxis);
      
        svg.append('g')
       	.attr('transform', 'translate(' + [0, height - margin.bottom - margin.top] + ')')
       	.call(xAxis);
    };
		reload();
  </script>
</body>

https://d3js.org/d3.v4.min.js