LessonBar

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .y line {
      display: none;
      stroke:none;
    }
    
    .y path {
      stroke:none;
    }
    
    .legend{
     	color:#005ebc;
      z-index:0;
    }
    
    .legend_font{
      font-family: sans-sarif;
      font-size: 20px;
    }
     
    /*.bar{
      fill: #0091a8;
    }*/
    
    .bar:hover{
      fill:#0f9fff;
    }
    
    .tooltip {
      opacity: 0;
      background-color: #ffe047;
      position: absolute;
		}
    
    .label {
      position: absolute;
      top: 15px;
      left: 665px;
    }
    
    select { 
      position: absolute; 
      left: 650px; 
      top: 35px; 
    }
  </style>
</head>

<body>
  <div class = "label">Sort By</div>
  <script>
    var json_data = "id,time,completed\n\
54042,60,66\n\
62042,80,74\n\
54054,88,76\n\
48042,99,78\n\
11011,165,92\n\
9123,190,100\n\
7125,52,46\n\
5123,80,74\n\
3121,110,82\n\
1121,50,55";
    
    var displayper = d3.format(".0%");
    
    data = d3.csvParse(json_data, function(d){ return {
      id:d.id, 
      time:+d.time,
    	percent:+d.completed}; });
  
    data = data.sort(function(a, b){
      return a.id - b.id;
    });
 
    var height = 500;
    var width = 800;
    var margin = {left: 70, right: 20, bottom: 0, top: 50};

var tooltip = d3.select("body").append("div").attr("class", "tooltip")

x = d3.scaleLinear()
      		.range([0, width])
    
    y = d3.scaleBand()
          .rangeRound([height, 0])
          .paddingInner(0.5);
    
    x.domain([minTime, maxTime]);
    y.domain(names);
    
    var xAxis = d3.axisBottom(x)
                  .scale(x);

var yAxis = d3.axisLeft(y)
        					.scale(y);

chartGroup.append("g")
              .attr("class","axis y")
              .call(yAxis);

chartGroup.append("g")
              .attr("class","axis x")
              .attr("transform","translate(0,"+height+")")
              .call(xAxis);
    
    chartGroup.append("text")
              .attr("transform", "translate("+(width/2)+","+(-20)+")")
              .attr("class", "legend_font")
              .text("Lesson Graph");
    
    chartGroup.append("text")
              .attr("transform","translate("+(-45)+","+height/2+")rotate(-90)")
              .attr("class", "legend_font")
              .text("Students");
    
    chartGroup.append("text")
              .attr("transform", "translate("+(width/2)+","+(height+40)+")")
              .attr("class", "legend_font")
              .text("Time (In Minutes)");
    
    var displayBar = function(data){
      
      var bars = chartGroup.selectAll(".bar")
      										.data(data);
      
      bar_enter = bars.enter().append("rect");
      
      bar_enter.attr("class", "bar")
               .attr("x", 0)
               .attr("y", function(d){ return window.y(d.id);} )
               .attr("height", window.y.bandwidth())
      				 .attr("fill", function(d, i) { return color(i); })	
               .transition()
               	.duration(800)
      					.attr("width", function(d){return window.x(d.time);})

bar_enter.on('mousemove', function(d,i){
        tooltip.style("opacity","1")
               .style("left",(d3.event.pageX+10)+"px")
               .style("top",d3.event.pageY+"px");
        tooltip.html(" Time: "+d.time);
      })
      
      bar_enter.on('mouseout', function(){
        tooltip.style("opacity","0")
      });
    }
    
    var displayText = function(data){
       
       legend.selectAll("text")
    		     .remove();

data.forEach(function(d) {
         
         var per = d.percent/100;
         
         legend.append("text")
         	 .transition()
         	 .delay(800)
           .attr("x", window.x(d.time)+3)
         	 .attr("y", window.y(d.id)+y.bandwidth()/1.5)
           .style("fill", "steelblue")
           .attr("class", "legend")
           .text(displayper(per));
        });
     }
    
     displayBar(data);
     displayText(data);
    
     var variables = ['id', 'time', 'percetage'];
     var index = 0;
    
     var selector = d3.select("body")
                      .append("select")
                      .attr("id", "sortby")
                      .selectAll("option")
                      .data(variables)
                      .enter().append("option")
                      .text(function(d) { 
                        return d; })
                      .attr("value", function (d, i) {
                        return i;
                       });
    
     d3.select("#sortby").on("change", function(d) {
       index = this.value;
       change1();
     });

chartGroup.selectAll(".bar")
           			 .sort(function(a, b) { return (a.id) - (b.id); });

var transition = chartGroup.transition()
       														.duration(750),
       		 delay = function(d, i) { return i * 50; };

transition.selectAll(".bar")
                 .delay(delay)
                 .attr("y", function(d) { return y0(d.id); });

transition.select(".axis.y")
          			 .call(yAxis)
       					 .selectAll("g")
          			 .delay(delay);
       
       displayText(data);
    }
  </script>
</body>

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