D3 Examples - First Rectangle

xxxxxxxxxx
 
<!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>
    