Sorting

Tutorial

Visualizations commonly have a notion of sorted order. We want to know which stock in our portfolio had the best (or worst) earnings. We want to know that heart disease is the number one cause of death in America. Other times the categories have an inherent ordering. January 2011 comes before February 2012 and "a" comes before "b". In any case, Javascript provides the Array.sort() function for sorting data in arrays. This function mutates the existing array into sorted order.

var array = [30, 3, 50, 5, "fifty"];
array.sort();
// array = [3, 30, 5, 50, "fifty"]

Array.sort() also takes an optional sorting function that allows you to specify how to sort the elements of the array. By default, Array.sort() converts each element in the array to a string and performs a string or lexicographic sort. Lexicographic sort means that each character from the two strings are compared one by one from left to right. For example '10' comes before '2' in lexicographic order because '1' is before '2'. The same holds true for every other number that starts with '1'. They all come before '2'. This is not what we want when sorting numbers.

The optional sort function has the contract that it takes two elements, say a and b, of the array and returns -1, 1 or 0 if a is before b, after b, or equal to b respectively.

// sort numbers as we expect
// smaller numbers go before larger numbers
function numSort(a,b) {
  if (a < b) {
    return -1;
  }
  if (b < a) {
    return 1;
  }
  return 0;
}

var array = [3, 30, 5, 50];
array.sort(numSort);
// array = [3, 5, 30, 50]

As a convenience, D3 provides two functions d3.ascending(a,b) and d3.descending(a,b) that sort numeric arrays in their standard ordering without effort on your part.

// 1 === d3.descending(1,3)
// i.e. 1 comes after 3

var array = [3, 30, 5, 50];
array.sort(d3.descending);
// array = [50, 30, 5, 3]

// 1 === d3.ascending(3,1)
// i.e. 3 comes after 1

array.sort(d3.ascending);
// array = [3, 5, 30, 50]

If you are sorting and array of objects, you need to specify a sorting function. The most common is just sorting on a single field, in which case it would look like the following example.

Airports with the most flights:

var data = [ {airport: "SJC", numFlights: 100},
             {airport: "LAX", numFlights: 353},
             {airport: "SNA", numFlights: 20} ];

data.sort(
function(a,b) { 
  // save time and effort by making use of d3.descending
  return d3.descending(a.numFlights, b.numFlights);
});

d3.select("#example3")
  .append("ol")
  .selectAll("li")
  .data(data)
  .enter()
  .append("li")
  .text(function(d) { return d.airport + " - " + d.numFlights; });

In this example the data is sorted highest to lowest (descending) based on the numFlights field. The code is simplified and easier to read by use of d3.descending(a,b).

It is also fairly simple to sort on multiple criteria. In the example below I sort on number of flights descending first and then alphabetically by airport code second.

Airports with the most flights:

var data = [ {airport: "SJC", numFlights: 100},
             {airport: "ABQ", numFlights: 353},  // just for the sake of example
             {airport: "LAX", numFlights: 353},
             {airport: "ZZV", numFlights: 20},   // just for the sake of example
             {airport: "SNA", numFlights: 20} ];

data.sort(
function(a,b) { 
  var numComp = d3.descending(a.numFlights, b.numFlights);
  if (numComp === 0) {                                     // only when 1st undecided
    return d3.ascending(a.airport, b.airport);             // 2nd sort criteria
  }
  return numComp;
});

d3.select("#example4")
  .append("ol")
  .selectAll("li")
  .data(data)
  .enter()
  .append("li")
  .text(function(d) { return d.airport + " - " + d.numFlights; });

Quiz

In Javascript's default sort order 457 comes before 91. True/False.

In a sort callback, returning -1 means that the first parameter is
greater than the second. True/False.

When sorting on multiple criteria, you only have to check the second
criteria when the first criteria is not equal. True/False.

Things to do

Change the code below so that the list of states is sorted alphabetically by name.

Extra Credit

Sort by date joined descending. (Hint, you will need to transform the date field to create Date objects).

Change the code on the left. Once you've made a change, the page will render on the right.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    </style>
    <script src="d3.min.js"></script>
  </head>
  <body>
    <h1>Your code will display here</h1>
    <script>
      var USA_State_Dates = [
        { state: "Delaware", date: "December 7, 1787" },
        { state: "Pennsylvania", date: "December 12, 1787" },
        { state: "New Jersey", date: "December 18, 1787" },
        { state: "Georgia", date: "January 2, 1788" },
        { state: "Connecticut", date: "January 9, 1788" },
        { state: "Massachusetts", date: "February 6, 1788" },
        { state: "Maryland", date: "April 28, 1788" },
        { state: "South Carolina", date: "May 23, 1788" },
        { state: "New Hampshire", date: "June 21, 1788" },
        { state: "Virginia", date: "June 25, 1788" },
        { state: "New York", date: "July 26, 1788" },
        { state: "North Carolina", date: "November 21, 1789" },
        { state: "Rhode Island", date: "May 29, 1790" },
        { state: "Vermont", date: "March 4, 1791" },
        { state: "Kentucky", date: "June 1, 1792" },
        { state: "Tennessee", date: "June 1, 1796" },
        { state: "Ohio", date: "March 1, 1803" },
        { state: "Louisiana", date: "April 30, 1812" },
        { state: "Indiana", date: "December 11, 1816" },
        { state: "Mississippi", date: "December 10, 1817" },
        { state: "Illinois", date: "December 3, 1818" },
        { state: "Alabama", date: "December 14, 1819" },
        { state: "Maine", date: "March 15, 1820" },
        { state: "Missouri", date: "August 10, 1821" },
        { state: "Arkansas", date: "June 15, 1836" },
        { state: "Michigan", date: "January 26, 1837" },
        { state: "Florida", date: "March 3, 1845" },
        { state: "Texas", date: "December 29, 1845" },
        { state: "Iowa", date: "December 28, 1846" },
        { state: "Wisconsin", date: "May 29, 1848" },
        { state: "California", date: "September 9, 1850" },
        { state: "Minnesota", date: "May 11, 1858" },
        { state: "Oregon", date: "February 14, 1859" },
        { state: "Kansas", date: "January 29, 1861" },
        { state: "West Virginia", date: "June 20, 1863" },
        { state: "Nevada", date: "October 31, 1864" },
        { state: "Nebraska", date: "March 1, 1867" },
        { state: "Colorado", date: "August 1, 1876" },
        { state: "North Dakota", date: "November 2, 1889" },
        { state: "South Dakota", date: "November 2, 1889" },
        { state: "Montana", date: "November 8, 1889" },
        { state: "Washington", date: "November 11, 1889" },
        { state: "Idaho", date: "July 3, 1890" },
        { state: "Wyoming", date: "July 10, 1890" },
        { state: "Utah", date: "January 4, 1896" },
        { state: "Oklahoma", date: "November 16, 1907" },
        { state: "New Mexico", date: "January 6, 1912" },
        { state: "Arizona", date: "February 14, 1912" },
        { state: "Alaska", date: "January 3, 1959" },
        { state: "Hawaii", date: "August 21, 1959" }
      ];

d3.select("body")
        .append("h4")
        .text("USA States date joined USA:");

// TODO sort states alphabetically by state name
      d3.select("body")
        .append("ol")
        .selectAll("li")
        .data(USA_State_Dates)
        .enter()
        .append("li")
        .text(function (d) { return d.state + " - " + d.date; });
    </script>
  </body>
</html>