Bar chart (rotating + highlighting)

<!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; }
    rect { stroke: black; }
    text { fill: black; text-anchor: middle }
    circle { fill: orange; stroke: steelblue; }
    svg { border: 0px solid green} 
    body { padding: 20px; }
  </style>
</head>

<body>
  <script> 
    
    const data = [
      { id: 0, total: 100, text: "pears", },
      { id: 1, total: 200, text: "apples",},
      { id: 2, total: 50, text: "bread",},
      { id: 3, total: 100, text: "oranges",},
    ]; 
    
    const width = 400;
    const height = 300;
    const margin = 50;
     
    const scaleY = d3.scaleLinear().domain([0,200]).range([margin, height - margin*2]);
    const scaleX = d3.scaleLinear().domain([0, data.length]).range([margin, width - margin]);
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

svg.append("g").classed("rects", true)
    	.selectAll("rect")
    	.data(data, d => d.id).enter()
    		.append("rect")
        .attr("x", (d, i) => scaleX(i))
        .attr("y", d => scaleY.range()[1] - scaleY(d.total))
        .attr("width", (d, i) => scaleX(1) - scaleX(0) - 10)
        .attr("height", d => scaleY(d.total))
    		.attr("id", d => `bar_${d.id}`)
    ;
   
    svg.append("g").classed("texts", true)
    	.selectAll("text")
    	.data(data, d => d.id).enter()
    		.append("text")
    		.attr("transform", (d, i) => `translate(${scaleX(i) + (scaleX(1) - scaleX(0))/2 }, ${scaleY.range()[1] + margin / 2})`)
    		.attr("id", d => `text_${d.id}`)
    		.text(d => d.text)
 
    function rotateChart() {
       // rotate container
      svg
        .transition().duration(2000)
        .attr("transform", `rotate(90, ${-margin}, 0)`);

// rotate text
      svg.select("g.texts").selectAll("text")
        .transition().delay(0).duration(2000) 
        .attr("transform", function(d, i) {
        const elem = d3.select(this);
        return `${elem.attr("transform")} rotate(-90)`;
      }); 
    }
    
    function colorize() {
    	svg.select("#text_2")
      	.style("font-size", "1em")
      	.transition().duration(2000)
      	.style("fill", "orange")
      	.style("font-size", "1.4em");
      
      
      svg.select("#bar_2")
      	.transition().duration(2000)
      	.style("fill", "orange")
    }
    
    setTimeout(() => {
      rotateChart();
    }, 3000);
    
    setTimeout(() => {
      colorize()
    }, 5000);
    
  </script>
</body>

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