Dynamic bar chart trace

<!DOCTYPE html>
<html>
	<head>
    <meta charset='utf-8'>
    <style>
            .chart svg{
                border:2px dashed #00a5bb;
            }
            text{
              font-size: 20px;
              font-family: Open Sans, sans-serif;
            }
            text.title{
              font-size: 36px;
              font-weight: 500;
            }
            text.subTitle{
              font-weight: 500;
              fill: #777777;
            }
            text.caption{
              font-weight: 400;
              font-size: 14px;
              fill: #777777;
            }
            text.label{
              font-weight: 600;
            }
            text.yearText{
              font-size: 64px;
              font-weight: 700;
              opacity: 0.25;
            }
            .tick text {
              fill: #777777;
            }
            .xAxis .tick:nth-child(2) text {
              text-anchor: start;
            }
            .tick line {
              shape-rendering: CrispEdges;
              stroke: #dddddd;
            }
            .tick line.origin{
              stroke: #aaaaaa;
            }
            path.domain{
              display: none;
            }
            </style>
    
    </head>
    
	<body>
        <center>
            <div class='chart'></div>
        </center>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
        <script>
            var halo = function(text, strokeWidth) {
            text.select(function() { return this.parentNode.insertBefore(this.cloneNode(true), this); })
                .style('fill', '#000000')
                .style('stroke','#ffffff')
                .style('stroke-width',strokeWidth)
                .style('stroke-linejoin','round')
                .style('opacity',1);
            };
            d3.csv = d3.dsv(",", "text/csv;charset=gb2312");
            d3.csv('South+Chennai+-+Sheet2+(3).csv',function(error,brandData){
                if (error) throw error;

const height = 668,width = 1346,top_n = 3,tickDuration = 3600, margin = {
                    top: 80,
                    right: 10,
                    bottom: 20,
                    left: 10
                };
                const svg = d3.select('.chart')
                        .append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom);
                // console.log(svg);

valueLabels
                    .enter()
                    .append('text')
                    .attr('class','valueLabel')
                    .attr('transform',function(d){
                            return `translate(${x(d.value)+30}, ${y(top_n+1)+5})`
                        })
                    // .text(d => d3.format(',.0f')(d.lastValue))
                    .transition()
                        .duration(tickDuration)
                        .ease('poly','1')
                        .attr('transform',function(d){
                            return `translate(0, ${y(d.rank)+5+((y(1)-y(0))/1)-20})`
                        });
                    
                    valueLabels
                    .transition()
                        .duration(tickDuration)
                        .ease('poly','1')
                        .attr('transform',function(d){
                            return `translate(${x(d.value)+30}, ${y(d.rank)+5+((y(1)-y(0))/1)-20})`
                        })
                        .tween("text", function(d) {
                            let k = d3.interpolateRound(d.lastValue, d.value);
                            return function(t) {
                                this.textContent = d3.format(',')(k(t));
                            };
                        });
                    
                    valueLabels
                    .exit()
                    .transition()
                        .duration(tickDuration)
                        .ease('poly','1')
                        .attr('transform',function(d){
                            return `translate(${x(d.value)+30}, ${y(top_n+1)+5})`
                        })
                    .remove();
                        
                    yearText.html(~~year);
                    
                
                    if(year == 2018){
                        clearInterval(ticker);                    
                    };
                    // year = d3.format('.1f')((+year+5) + 0.1);
                    year = year + 1;
                    
                },tickDuration);
            });
            
        </script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js