First Rectangle

<!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; }
   
  </style>
</head>

<body>
		<button id="Ascending">Sort Ascending</button>
		<button id="Descending">Sort Descending</button>
  <script>
    
    var width = 960;
    var height = 500;
    
    var x = d3.scaleLinear()
              .range([0, width]);

d3.csv("alpha_frequencies.csv", function(error, dataset) {console.log(dataset);

dataset.forEach(function(d) {
      d.frequency = +d.frequency; //parseFloat(d.frequency)
      });
      
      dataset.sort(function(a, b) { return b.frequency - a.frequency;
                               });

var max_freq = d3.max(dataset, function (d) { return d.frequency;
                                            });
// Set Domain of the scale
x.domain([0,max_freq]);
                                                              
      var chart = d3.select("body")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height);
                                                              
      var rects = chart.selectAll("rect")
              .data(dataset);

rects.enter()                                                           
   .append("rect")
   .attr("width", function(d) { return x(d.frequency); })
	 .attr("y", function(d, i) { return i * 20})
   .attr("height", 18);

//     d3.selectAll(".button")
//     	.on("click", function() {
//       var group_num = d3.select(this).text()
// //       filterGroup(group_num)
//       // Need to add ascending and descending
//       dataset.forEach(function(d) {
//       d.frequency = +d.frequency; //parseFloat(d.frequency)
//       });
//         dataset.sort(function(a, b) { return b.frequency - a.frequency;
//     })
//                        });                                         
 		//Sorting logic
		d3.select("#Ascending")
			.on("click", function() {

rects.sort(function(a, b) {
  						return d3.ascending(a, b);
					})
					.transition()
					.delay(function(d, i) {
						return i * 20;  // gives it a smoother effect
					})
					.duration(5)
					.attr("transform", function(d, i) {
				  		return "translate(" + xScale(i) + ",0)";
					});
 rects.enter()                                                           
   .append("rect")
   .attr("width", function(d) { return x(d.frequency); })
	 .attr("y", function(d, i) { return i * 20})
   .attr("height", 18);
			});

//This is EXACTLY the same as above, except for:
		d3.select("#Descending")  //DEscending
			.on("click", function() {

rects.sort(function(a, b) {
  						return d3.descending(a, b);  //DEscending
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					console.log(dataset)
			});
                                                             
                                                              
});

</script>
</body>

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