D3 Bar Chart

<!DOCTYPE html>
<head>  
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:10;
      top:0;
      right:0;
      bottom:0;
      left:0; 
    }
    button { 
      
    }
  </style>
</head>

<body>
  <script>
    
    var currentData = 1;
    var dataset = [10, 20, 30 ,40 ,50, 60, 70, 80, 90, 100],
        dataset2 = [10,9,8,7,6,5,4,3]
    
    var margin = {top: 20, bottom: 10, left: 35, right: 10};
   
    var svgWidth = 300 - margin.left - margin.right, 
        svgHeight = 200 - margin.top - margin.bottom, 
        barPadding = 5;
    var barWidth = (svgWidth / dataset.length);
    
    
    var svg = d3.select("body").append("svg")
    	//.style("padding", 12)
    	.attr("class", "svg")
      .attr("width", svgWidth + margin.left + margin.right)
      .attr("height", svgHeight + margin.top + margin.bottom)
      
    var container = svg.append("g")
      .attr("transform", "translate(" 
            + 	margin.left + "," 
            + 	margin.top 	+ ")");

//JOIN
      var barChart = container.selectAll(".bar")
      	.data(data); 
      
      var text = container.selectAll(".bar-text")
      	.data(data);
      
      
      //UPDATE
      barChart.transition().duration(500)
      	.attr("y", function(d) {return yScale(d)})
        .attr("height", function(d) {return svgHeight - yScale(d)})
      	.attr("width", barWidth - barPadding)
        .attr("transform", function(d, i) {
            var translate = [barWidth * i, 0];
            return "translate(" + translate + ")";
          });
      
      text.transition().duration(500)
      	.text(function(d){return d})
      	.attr("x", function(d, i){
          return (barWidth * i) + (barWidth/2) - 2;
        })
        .attr("y", function(d) {
          return yScale(d) - 2;
        });
      
      //barChart.transition().duration(500);
      //text.transition().duration(500);
      
      //ENTER
			barChart.enter()
        .append("rect")
        .attr("class", "bar")
       	.style("fill", "steelblue")
        .attr("transform", function(d, i) {
            var translate = [barWidth * i, 0];
            return "translate(" + translate + ")";
         })
      	.transition().duration(500)
        .attr("y", function(d) {return yScale(d)})
        .attr("height", function(d) {return svgHeight - yScale(d)})
        .attr("width", barWidth - barPadding);
       
      
      text.enter()
        .append("text")
        .attr("class", "bar-text")
      	.attr("fill", "steelblue")
      	.attr("x", function(d, i){
          return (barWidth * i) + (barWidth/2) - 2;
       		})
      	.transition().duration(500)
        .text(function(d){return d})
        .attr("font-family", "monospace")
        .attr("text-anchor", "middle")
        .attr("y", function(d) {
          return yScale(d) - 2;
        });
      
      //EXIT
      barChart.exit().remove(); 
      text.exit().remove();

}

</script>
  <button onclick="update()">Update</button>
</body>

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