D3 Examples - 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>
  <div id='buttonContainer'>
    <button class = "button">Sort Ascending</button>
    <button class="button">Sort Descending</button>
  </div>
  <script>
    
    var width = 960;
    var height = 500;
    var x = d3.scaleLinear()
                        .range([0, width]);
    var chart = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    
​
    
​
    
    function draw(dataset) {
      chart.selectAll('rect')
      .data(dataset)
        .attr('width', function(d) {return x(d.frequency);})
        .attr('y', function(d, i) {return i * 20})
        .attr('height', 18);
    }
    
    function sortAscending(dataset) {
        dataset.sort(function(a,b) {
        return -(b.frequency - a.frequency);
      })
      draw(dataset);
    }
    
    function sortDescending(dataset) {
        dataset.sort(function(a,b) {
        return b.frequency - a.frequency;
      })
      draw(dataset);
    }
    
    d3.selectAll(".button")
      .on("click", function() {
        var sort_type = d3.select(this).text();
        if (sort_type == 'Sort Ascending') {
            sortAscending(dataset);
​
        }
        else {
          sortDescending(dataset);
        }
    });
    
    var dataset;
    d3.csv('alpha_frequencies.csv', function(error,     data){
      
            dataset = data
      dataset.forEach(function(d) {
        d.frequency = +d.frequency;
      });
      var max_freq = d3.max(dataset, function(d) {
        return d.frequency;
      })
      x.domain([0, max_freq]);
      
     chart.selectAll('rect').data(dataset)
                .enter()
        .append('rect')
        .attr('width', function(d) {return x(d.frequency);})
        .attr('y', function(d, i) {return i * 20})
        .attr('height', 18);
    });
    
  </script>
</body>
​
    