<head>
    <link rel="icon" type="image/ico" href="https://www.singularity-hub.org/static/img/favicon.ico"/>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>

<style>
#heatmap {
  height: 95%;
}
#title {
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
  margin-top: 10px;
  color: #666;
}
</style>

</head>

<body>  
  <h1 id="title">Container Similarity</h1>
  <div id="heatmap"></div>
  <script>

$.getJSON("data.json", function(data) {

    console.log(data);
    // var xValues = ['A', 'B', 'C', 'D', 'E'];
    var xValues = data.X;

    // var yValues = ['W', 'X', 'Y', 'Z'];
    var yValues = data.Y;

    // var zValues = [
    //  [0.00, 0.00, 0.75, 0.75, 0.00],
    //  [0.00, 0.00, 0.75, 0.75, 0.00],
    //  [0.75, 0.75, 0.75, 0.75, 0.75],
    //  [0.00, 0.00, 0.00, 0.75, 0.00]
    // ];

    var zValues = data.data;

    var colorscaleValue = [
      [0, '#3D9970'],
      [1, '#001f3f']
    ];

    var data = [{
      x: xValues,
      y: yValues,
      z: zValues,
      type: 'heatmap',
      colorscale: colorscaleValue,
      showscale: true
    }];

    var layout = {
      annotations: [],
      autosize: true,
    xaxis: {
        ticks: '',
        side: 'top',
        autosize: true
    },
     yaxis: {
        ticks: '',
        ticksuffix: ' ',
        width: 700,
        height: 900,
        autosize: true
      }
    };

for ( var i = 0; i < yValues.length; i++ ) {
  for ( var j = 0; j < xValues.length; j++ ) {
    var currentValue = zValues[i][j];
    if (currentValue != 0.0) {
      var textColor = 'white';
    }else{
      var textColor = 'black';
    }
    var result = {
      xref: 'x1',
      yref: 'y1',
      x: xValues[j],
      y: yValues[i],
      text: zValues[i][j],
      font: {
        family: 'Arial',
        size: 12,
        color: 'rgb(50, 171, 96)'
      },
      showarrow: false,
      font: {
        color: textColor
      }
    };
    layout.annotations.push(result);
  }
}
Plotly.newPlot('heatmap', data, layout);
});
  </script>
</body>
