title: Sorting bar charts in D3
body: <p>I created a bar chart in D3 and I'm trying to sort the bars in a bar chart in ascending order on clicking, and on descending on clicking again. I added in the necessary code for sorting at the end of the code snippet but nothing happens on clicking (the bars don't sort). Not sure what I'm missing here, any help would be appreciated!</p>
  
  <pre><code>    &lt;script&gt;
  
      var margin = {top: 40, right: 20, bottom: 30, left: 40},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;
  
      var formatPercent = d3.format(".0%");
  
      var x = d3.scale.ordinal()
          .rangeRoundBands([0, width], .1);
  
      var y = d3.scale.linear()
          .range([height, 0]);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");
  
      var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left")
          .tickFormat(formatPercent);
  
      var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
          return "&lt;strong&gt;Frequency:&lt;/strong&gt; &lt;span style='color:red'&gt;" + d.frequency + "&lt;/span&gt;";
        })
  
      var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      svg.call(tip);
  
      d3.tsv("data/bar-graph-tooltips.tsv", type, function(error, data) {
        x.domain(data.map(function(d) { return d.letter; }));
        y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
  
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
  
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Frequency");
  
        svg.selectAll(".bar")
            .data(data)
          .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.letter); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.frequency); })
            .attr("height", function(d) { return height - y(d.frequency); })
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide)
            .on("click", function() {sortBars();});
  
            //Define sort order flag
          var sortOrder = false;
  
          //Define sort function
          var sortBars = function() {
  
              //Flip value of sortOrder
              sortOrder = !sortOrder;
  
              svg.selectAll("rect")
                 .sort(function(a, b) {
                      if (sortOrder) {
                          return d3.ascending(a, b);
                      } else {
                          return d3.descending(a, b);
                      }
                  })
                 .transition()
                 .delay(function(d, i) {
                     return i * 50;
                 })
                 .duration(1000)
                 .attr("x", function(d, i) {
                      return xScale(i);
                 });
  
          };          
      });
  
  
      function type(d) {
        d.frequency = +d.frequency;
        return d;
      }
  
      &lt;/script&gt;
  </code></pre>