Practice d3-array search

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
  
  <script src="data.js"></script>

<body>
  <script>
    // Using blocks to continue to learn about d3v4
    // Following d3 documentation
    // https://github.com/d3/d3/blob/master/API.md#arrays-d3-array
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
		// d3.scan
    var index = d3.scan(gdp, function(a, b) { return a.gdp - b.gdp; });
    svg.append("text")
      .text("d3.scan (index): " + index + ", gdp[index].state: " + gdp[index].state)
      .attr("y", 40)
      .attr("x", 10)
      .attr("font-size", 16)
      .attr("font-family", "monospace")

// d3.bisect - Not sure I understand how this is used
    
    // d3.ascending - natural sort
    var asc = gdp.sort(function(a,b) { return d3.ascending(a.state, b.state); });
    svg.append("text")
    	.text("Ascending States")
    	.attr("y", 60)
    	.attr("x", 10)
      .attr("font-size", 16)
      .attr("font-family", "monospace");
    
    for (var i=0; i < 10; i++) {
      svg.append("text")
        .text("Item " + i + " = " + gdp[i].state)
        .attr("y", 80 + (i * 20))
        .attr("x", 10)
        .attr("font-size", 16)
        .attr("font-family", "monospace");
    }
    
    // d3.descending - natural sort
    var asc = gdp.sort(function(a,b) { return d3.descending(a.state, b.state); });
    svg.append("text")
    	.text("Descending States")
    	.attr("y", 60)
    	.attr("x", 300)
      .attr("font-size", 16)
      .attr("font-family", "monospace");
    
    for (var i=0; i < 10; i++) {
      svg.append("text")
        .text("Item " + i + " = " + gdp[i].state)
        .attr("y", 80 + (i * 20))
        .attr("x", 300)
        .attr("font-size", 16)
        .attr("font-family", "monospace");
    }

</script>
</body>

https://d3js.org/d3.v4.min.js