InkStitch - data visualization/highcharts-heatmap-js-code

I did not manage to read a regular rectangular CSV and hat to convert it to triplets (name,assignment_no,grade).

JS

Highcharts.chart("container", {
  chart: {
    type: "heatmap",
    inverted: true,
    spacingTop: 20,
    width: 670,
    height: "72%"
  },

  data: {
    csv: document.getElementById("csv").innerHTML
  },

  title: {
    text: "FRIENDLY STIC GRADING HEAT MAP",
    align: "left",
    style: {fontSize:"25pt", fontWeight:900}
  },

  // Y-AXIS (in the display since we inverted)
  xAxis: {
    tickLength: 0,
    // set to true to see
    labels: { enabled: false },
    categories: [
      "Dd",
      "La",
      "Ab",
      "Ay",
      "Ar",
      "Is",
      "Rn",
      "An",
      "Ls",
      "Sr",
      "En",
      "An",
      "Az",
      "Ra",
      "Hi",
      "Ei",
      "Na",
      "Im",
      "Lr",
      "Ai",
      "Ti",
      "Ru",
      "Os",
      "Rt",
      "En",
      "Ln",
      "Hr",
      "Ri"
    ],
    min: 0,
    max: 27
  },
  // X AXIS in the display (inverted)
  yAxis: {
    title: null,
    minPadding: 0,
    maxPadding: 0,
    startOnTick: false,
    endOnTick: false,
    min: 1,
    max: 12,
    // tickInterval: 1,
    // tickWidth: 10, // comment out later
    reversed: false,
    labels: {
      // padding: 10,
      align: "center",
      reserveSpace: true,
      style: {
        fontSize: "20pt",
        fontWeight: "bold",
        color: "red"
      }
    }
  },

  colorAxis: {
    min: 0,
    max: 6,
    // minColor: "yellow",
    // maxColor: "red"
    stops: [
      [0.1, "Lavender"],
      [0.83, "Gold"],
      [0.9, "yellow"],
      [0.975, "orange"],
      [0.99, "red"]
    ]
  },
  legend: {
    align: "right",
    layout: "vertical",
    margin: 0,
    verticalAlign: "top",
    y: 40,
    symbolHeight: 365,
    itemStyle: {
      color: "red",
      fontSize: "20pt"
      }
  },

  tooltip: {
    formatter: function() {
      // return '<b>' + "STU=" + this.point.x + " Grade=" + this.point.y + "</b>";
      return (
        "<b>" +
        this.series.xAxis.categories[this.point.x] +
        "</b> has grade <br><b>" +
        this.point.value +
        "</b> for ex " +
        this.point.y +
        "</b>"
      );
    }
  },

  series: [
    {
      borderWidth: 2,
      colsize: 1,
      // below are the labels in the squares
      dataLabels: { enabled: false, color: "white" }
    }
  ]
});

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 128mm; width: 178mm;border:1px solid red"></div>
<!-- BE VERY CAREFUL WITH DATA. ONE SINGLE MISTAKE, e.g. "O" instead of "0" and your data will display freakingly -->
<pre id="csv" style="display: none">Name,Ex,Grade
0, 1, 5.75
0, 2, 5.75
0, 3, 5.25
0, 4, 5.5
0, 5, 5.5
0, 6, 5.5
0, 7, 5.5 
0, 8, 6
0, 9, 5.5
0, 10, 5.75
0, 11, 6
0, 12, 5.5
1, 1, 6
1, 2, 5.75
1, 3, 5.75
1, 4, 5.25
1, 5, 5.25
1, 6, 5.25
1, 7, 5.75
1, 8, 6
1, 9, 5.75
1, 10, 5.75
1, 11, 6
1, 12, 6
2, 1, 5
2, 2, 5.5
2, 3, 5.25
2, 4, 4.5
2, 5, 5.25
2, 6, 4.5
2, 7, 5.25
2, 8, 5.75
2, 9, 5.75
2, 10, 6
2, 11, 5.75
2, 12, 5.5
3, 1, 6
3, 2, 6
3, 3, 5.5
3, 4, 0
3, 5, 5
3, 6, 5
3, 7, 5.5
3, 8, 5.75
3, 9, 5.5
3, 10, 5.75
3, 11, 5.75
3, 12, 5.75
4, 1, 5.5
4, 2, 5.75
4, 3, 5.5
4, 4, 5
4, 5, 4.75
4, 6, 4.5
4, 7, 5.25
4, 8, 5.75
4, 9, 5
4, 10, 5.25
4, 11, 5
4, 12, 6
5, 1, 6
5, 2, 5.75
5, 3, 6
5, 4, 5.75
5, 5, 5.75
5, 6, 5.75
5, 7, 5.75
5, 8, 5.5
5, 9, 5.75
5, 10, 5.5
5, 11, 5.25
5, 12, 5.75
6, 1, 5.5
6, 2, 6
6, 3, 5.5
6, 4, 5
6, 5, 5.25
6, 6, 5.25
6, 7, 6
6, 8, 5.75
6, 9, 6
6, 10, 5.75
6, 11, 5.75
6, 12, 5.75
7, 1, 6
7, 2, 5.75
7, 3, 5.75
7, 4, 5.75
7, 5, 5.5
7, 6, 5.5
7, 7, 0
7, 8, 0
7, 9, 0
7, 10, 0
7, 11, 0
7, 12, 0
8, 1, 4.5
8, 2, 5.5
8, 3, 5.25
8, 4, 5.25
8, 5, 5.25
8, 6, 5.0
8, 7, 5.5
8, 8, 6
8, 9, 6
8, 10, 6
8, 11, 6
8, 12, 6
9, 1, 6.0
9, 2, 5.5
9, 3, 5.75
9, 4, 5.25
9, 5, 5.25
9, 6, 5.5
9, 7, 5.25
9, 8, 5.5
9, 9, 5.5
9, 10, 5.5
9, 11, 6
9, 12, 5.75
10, 1, 6.0
10, 2, 5.5
10, 3, 6.0
10, 4, 5.5
10, 5, 6.0
10, 6, 6.0
10, 7, 6
10, 8, 5.5
10, 9, 6
10, 10, 5.75
10, 11, 6
10, 12, 6
11, 1, 6.0
11, 2, 5
11, 3, 5.25
11, 4, 5.5
11, 5, 5.25
11, 6, 5.25
11, 7, 4.75
11, 8, 5
11, 9, 5.5
11, 10, 5.5
11, 11, 6
11, 12, 6
12, 1, 5.75
12, 2, 5.5
12, 3, 5.25
12, 4, 5.0
12, 5, 5.5
12, 6, 5.5
12, 7, 5.5
12, 8, 5.75
12, 9, 5.25
12, 10, 5
12, 11, 5.5
12, 12, 5.5
12, 1, 5
13, 2, 5.75
13, 3, 4.5
13, 4, 4.75
13, 5, 4.5
13, 6, 4.5
13, 7, 5.25
13, 8, 5
13, 9, 5
13, 10, 5
13, 11, 5.75
13, 12, 5.75
14, 1, 6.0
14, 2, 5.5
14, 3, 5.5
14, 4, 5.5
14, 5, 5.75
14, 6, 5.25
14, 7, 5.75
14, 8, 5.75
14, 9, 6
14, 10, 6
14, 11, 6
14, 12, 6
15, 1, 6.0
15, 2, 5.75
15, 3, 5.25
15, 4, 5.75
15, 5, 5.75
15, 6, 6.0
15, 7, 5.25
15, 8, 5.75
15, 9, 5.75
15, 10, 5.75
15, 11, 5.75
15, 12, 5.75
16, 1, 6.0
16, 2, 6
16, 3, 5.5
16, 4, 5.0
16, 5, 5.75
16, 6, 5.75
16, 7, 5.25
16, 8, 5.5
16, 9, 5.25
16, 10, 5.25
16, 11, 6
16, 12, 5.75
17, 1, 6.0
17, 2, 6
17, 3, 6.0
17, 4, 5.75
17, 5, 5.75
17, 6, 6.0
17, 7, 6
17, 8, 5.5
17, 9, 5.25
17, 10, 5.25
17, 11, 5.75
17, 12, 0
18, 1, 5.75
18, 2, 5.75
18, 3, 5.75
18, 4, 5.25
18, 5, 5.75
18, 6, 5.75
18, 7, 5.75
18, 8, 5.5
18, 9, 5.75
18, 10, 5.5
18, 11, 5.75
18, 12, 5.75
19, 1, 5.75
19, 2, 5.75
19, 3, 4.75
19, 4, 5.25
19, 5, 5.0
19, 6, 5.25
19, 7, 4.75
19, 8, 5
19, 9, 5.25
19, 10, 5.75
19, 11, 5.75
19, 12, 5.25
20, 1, 6.0
20, 2, 5.25
20, 3, 5.75
20, 4, 5.75
20, 5, 5.75
20, 6, 5.5
20, 7, 4.75
20, 8, 5.5
20, 9, 6
20, 10, 5.75
20, 11, 6
20, 12, 6
21, 1, 6.0
21, 2, 5.5
21, 3, 5.25
21, 4, 4.5
21, 5, 4.75
21, 6, 4.5
21, 7, 4.75
21, 8, 4.75
21, 9, 5.25
21, 10, 5.25
21, 11, 5
21, 12, 5.25
22, 1, 5.75
22, 2, 4.75
22, 3, 5.0
22, 4, 4.75
22, 5, 4.75
22, 6, 5.0
22, 7, 5
22, 8, 5.25
22, 9, 4.75
22, 10, 5.25
22, 11, 5.25
22, 12, 5.25
23, 1, 6.0
23, 2, 6
23, 3, 6.0
23, 4, 5.0
23, 5, 6.0
23, 6, 6.0
23, 7, 5.25
23, 8, 5.25
23, 9, 5.25
23, 10, 5.25
23, 11, 6
23, 12, 5.75
24, 1, 5.25
24, 2, 5.5
24, 3, 5.5
24, 4, 5.75
24, 5, 5.5
24, 6, 5.75
24, 7, 5.75
24, 8, 5.75
24, 9, 6
24, 10, 6
24, 11, 6
24, 12, 6
25, 1, 5.25
25, 2, 5.5
25, 3, 0
25, 4, 0
25, 5, 0
25, 6, 0
25, 7, 5.25
25, 8, 5.5
25, 9, 0
25, 10, 0
25, 11, 0
25, 12, 0
26, 1, 6
26, 2, 5.75
26, 3, 0
26, 4, 0
26, 5, 0
26, 6, 0
26, 7, 5
26, 8, 5.5
26, 9, 6
26, 10, 5.25
26, 11, 6
26, 12, 6
27, 1, 6
27, 2, 6
27, 3, 5.25
27, 4, 4.5
27, 5, 5.5
27, 6, 5.25
27, 27, 0
27, 8, 0
27, 9, 0
27, 10, 0
27, 11, 0
27, 12, 0
</pre>