arraysort with download

<!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>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    // Step 1: download all the data from the web and place in a TWO Dimentional ARRAY called "tickerdata"
var tickerdata = [
  [5, 5, 5, 5, 5],
  [3, 4, 5, 6, 7],
  [1, 6, 1, 6, 3],
  [4, 4.5, 5, 5.5, 6],
  [70, 46, 51, 56, 60]
];
var tickersymbol = ["CSCO", "MSFT", "INTC", "GOOG", "AAPL"];
console.log("STEP 1: Original Data:", JSON.stringify(tickerdata));
// Step 2 calucalte the (return percent)
// input: tickerdata
// output: tickerdatapercent
var ref = 4;
var tickerdatapercent = [];
tickerdata.forEach(function(tickerelement) {
  refValue = tickerelement[ref];
  tickerdatapercent.push([]);
  tickerelement.forEach(function(element) {
    tickerdatapercent[tickerdatapercent.length - 1].push(
      element / refValue - 1
    );
  }, this);
}, this);
console.log(
  "STEP 2: Return percent with relative reference 4",
  JSON.stringify(tickerdatapercent)
);
// Step 3 calucalte the rank of (return percent) for each column
// input: tickerdatapercent
// output: ranked
// because the ranking code in the later step can rank only per row, we need to do transpose on array
// transpose source: https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript
var newArray = tickerdatapercent[0].map(function(col, i) {
  return tickerdatapercent.map(function(row) {
    return row[i];
  });
});
// ranking array source https://stackoverflow.com/questions/14834571/ranking-array-elements
var rankedxed = [];
newArray.forEach(function(element) {
  var sorted = element.slice().sort(function(a, b) {
    return b - a;
  });
  var ranks = element.slice().map(function(v) {
    return sorted.indexOf(v) + 1;
  });
  rankedxed.push(ranks);
}, this);
// transposing it back
// https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript
var ranked = rankedxed[0].map(function(col, i) {
  return rankedxed.map(function(row) {
    return row[i];
  });
});
console.log("STEP 3: RANK of (return percent)", JSON.stringify(ranked));
// Step 4 count the values from step 2 that compares with thresholds 1 and 0.6666, etc, for each time frame
// input: tickerdatapercent
// output: totalcount
var ranges = [-1, -0.666667, -0.333333, 0, 0.33333, 0.66667, 1];
var bins0 = [0, 0, 0, 0, 0, 0];
var totalcount = [];
totalcount.length = 0;
var countrow = [];
for (var i = 0; i < newArray.length; ++i) {
  countrow = [0, 0, 0, 0, 0, 0];
  for (var j = 0; j < newArray[i].length; ++j) {
    for (var k = 0; k < ranges.length - 1; ++k) {
      if (newArray[i][j] > ranges[k] && newArray[i][j] <= ranges[k + 1]) {
        countrow[k]++;
      } else {
        countrow[k] += 0.0;
      }
    }
  }
  totalcount.push(countrow);
}
console.log("STEP 4: Count into Bins:", JSON.stringify(totalcount));
//Step 5 Use "totalcount" 2D Array variable data from stap 4 to draw the *BACKGROUND chart*
// for the Group List for the count of each of the six colors,
//
// d3.draw(totalcount)
//
//Step 6 Use Step 3 "ranked" 2D Array variable data to draw lines for the sub group
// d3.draw(ranked[1])  * for CSCO
console.log("This is Data for CSCO Line on top:", JSON.stringify(ranked[0]));
// d3.draw(rankes[2])  * for MSFT
console.log("This is Data for MSFT Line on top:", JSON.stringify(ranked[1]));

// notes: of the data becomes too larger, we can skip one in four of the columns to make it faster

</script>
</body>

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