D3 Examples - Rectangles Practice

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>
 <button class="button">Ascend</button>
 <button class="button">Descend</button>
​
<body>
  <script>
      
    var margin = {top: 20, right: 40, bottom: 20, left: 10};
​
    var width = 500 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;
​
    // Scales
    var x = d3.scaleLinear()
        .range([0, width])
        .domain([4, 15]);
    
    var x = d3.scaleLinear()
                    .range([0,width]);  
    
    
    d3.csv('alpha_frequencies.csv',function(error,dataset){
    dataset.forEach(function(d) {
      d.frequency = +d.frequency; //the plus sign updates to float
    })
    
    function sortData(sortHow) {
      if (sortHow == "Ascend"){
        dataset.sort(function(a,b){
        return a.frequency - b.frequency;
      })} 
      else 
      {
         dataset.sort(function(a,b){
         return b.frequency - a.frequency;
      })
    }
    }       
​
    
    d3.selectAll(".button")
      .on("click", function() {
        var sortHow = d3.select(this).text();
        sortData(sortHow);
      });
​
   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('height',16)
    .attr('y',function(d,i){return i* 18});
    
       console.log(dataset);
    
  });
  </script>
</body>
​
    