D3 Examples - First Rectangles Alpha Frequencies

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 class="button">Ascend</button>
  <button class="button">Descend</button>
  <script>
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
     
    // Set the ranges
    var xScale = d3.scaleLinear()
                            .range([0, width]); 
    
    // Define the axes
// var xAxis = d3.svg.axis().scale(x)
//     .orient("bottom").ticks(5);
​
// var yAxis = d3.chart.axis().scale(y)
//     .orient("left").ticks(5);
    
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
    
    function draw(dataset) {
     svg.selectAll("rect")
        .data(dataset)
            .transition()
        .attr("width", function(d) 
              { return xScale(d.frequency); })
        .attr("y", function(d, i) {return i*20})
        .attr("height", 18);
    }
    
    
     function order(order_how) {
        if (order_how == "Ascend") { 
         dataset = dataset.sort(function(a, b) {
        return b.frequency - a.frequency;
      });
          draw(dataset);
          console.log(dataset);
        }
        else if (order_how == "Descend"){
        dataset = dataset.sort(function(a, b) {
        return a.frequency - b.frequency;
           
      }); 
          draw(dataset);
          console.log(dataset);
        }   
      }
    
     d3.selectAll(".button")
        .on("click", function() {
        var order_how = d3.select(this).text();
       console.log(order_how)
        order(order_how);
      })
    var dataset;
    d3.csv("alpha_frequencies.csv",            
           function(error, data) {
      
      dataset = data;
//convert strings to numbers (also ParseFloat works)
      dataset.forEach(function(d) {
        d.frequency = +d.frequency;
       
      })     
      
      var max_freq = d3.max(dataset, function(d) {
        return d.frequency;
      })
      
     //Set domain of the scale
     xScale.domain([0, max_freq]);
      
//      draw(dataset);
     console.log(dataset)
      svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("width", function(d) 
              { return xScale(d.frequency); })
        .attr("y", function(d, i) {return i*20})
        .attr("height", 18);
​
    });
    
 // console.log(dataset);   
  </script>
</body>
​
    