title: Recursive quartile sorter in Javascript
body: <p>I am building a quartile sorter in Javascript. Codepen is below. Drag headers in the table to gray area above the table to see the table sort.
  <a href="https://codepen.io/carbondesign/pen/MPPRPW?editors=0010" rel="nofollow noreferrer">https://codepen.io/carbondesign/pen/MPPRPW?editors=0010</a></p>
  
  <p>This code is working except for 2 problems:
  1. I have written it long hand so as to break the problem down for myself
  2. Sorting by a third column does not work. </p>
  
  <p>To see #2, drag "area" into the sorter box(grey area above table) and the table sorts as expected (Russia is the largest country). Drag "population" into the sorter area and the table sorts as expected (China is the largest, highest population country). Drag "population growth rate" in to the sorter areas and it almost works but not quite. I get double values and the sort order should be as follows with Iraq being the largest, highest population country with the highest growth rate.</p>
  
  <ul>
  <li>Iraq 2.93</li>
  <li>Ethiopia 2.89</li>
  <li>Tanzania 2.79</li>
  <li>Angola 2.77</li>
  <li>Cameroon 2.59</li>
  <li>Madagascar 2.58</li>
  <li>Yemen 2.47</li>
  <li>Nigeria 2.45</li>
  <li>Congo 2.45</li>
  <li>Mozambique 2.45</li>
  <li>Afganistan 2.32</li>
  <li>Kenya 1.93</li>
  <li>Algeria 1.84</li>
  <li>Egypt 1.79</li>
  <li>Sudan 1.72</li>
  <li>India 1.22</li>
  <li>Pakistan 1.46</li>
  <li>Saudi Arabia 1.46</li>
  <li>Venezuela 1.39</li>
  <li>South Africa 1.33</li>
  <li>Turkey 1.26</li>
  <li>Iran 1.2</li>
  <li>Mexico 1.18</li>
  <li>Australia 1.07</li>
  <li>Columbia 1.04</li>
  <li>Burma 1.01</li>
  <li>Morrocco 1</li>
  <li>...</li>
  </ul>
  
  <p>The problematic code starts on line 154 (again, I wrote this out longhand on purpose): </p>
  
  <pre><code>    let thirdBuckets = [[],[],[],[]]
      secondBuckets.forEach( (secondbucket) =&gt; {
          secondbucket.forEach((currentVal) =&gt; {
              if(currentVal[sorters[i]] !== null){
                  if(currentVal[sorters[i]] &gt; columnSummary[sorters[i]].min &amp;&amp; currentVal[sorters[i]] &lt;= columnSummary[sorters[i]].first){
                      thirdBuckets[0].push(currentVal);
                  }
                  if(currentVal[sorters[i]] &gt; columnSummary[sorters[i]].first &amp;&amp; currentVal[sorters[i]] &lt;= columnSummary[sorters[i]].mean){
                      thirdBuckets[1].push(currentVal);
                  }
                  if(currentVal[sorters[i]] &gt; columnSummary[sorters[i]].mean &amp;&amp; currentVal[sorters[i]] &lt;= columnSummary[sorters[i]].third){
                      thirdBuckets[2].push(currentVal);
                  }
                  if(currentVal[sorters[i]] &gt; columnSummary[sorters[i]].third &amp;&amp; currentVal[sorters[i]] &lt;= columnSummary[sorters[i]].max){
                      thirdBuckets[3].push(currentVal);
                  }
              }else{
                  nullBucket.push(currentVal);
              }
          });
          secondbucket.length = 0;
          thirdBuckets.forEach((thirdbucket) =&gt; {
              thirdbucket.forEach((currentVal) =&gt; {
                  secondbucket.push(currentVal)
              })
          });
  
      })
      console.log(thirdBuckets);
      results.length = 0;
      secondBuckets.forEach((secondbucket) =&gt; {
          // regularSort(secondbucket, sorters[i])
          secondbucket.forEach((currentVal) =&gt; {
                  results.push(currentVal)
          })
      })
  }
  </code></pre>
  
  <p>All suggestions are appreciated.</p>