<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>Container Comparison Heatmap</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="http://vsoch.github.io/image-comparison-thresholding/static/js/tipsy.js"></script>
    <link rel="icon" type="image/ico" href="https://www.singularity-hub.org/static/img/favicon.ico"/>
    <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    <style>
 
      body {
          font-family: 'Roboto', sans-serif;
      }
      rect.bordered {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

      text.mono {
        font-size: 9pt;
        font-family: 'Roboto', sans-serif lower-case;
        fill: #aaa;
      }

      text.yaxis {
        fill: #000;
      }

      text.xaxis {
        fill: #000;
      }

      footer {
          padding-left:20px;
          padding-bottom:10px;
      }
      .d3-tip {
         line-height: 1;
         font-weight: bold;
         padding: 12px;
         background: rgba(0, 0, 0, 0.8);
         color: #fff;
         border-radius: 2px;
       }

       /* Creates a small triangle extender for the tooltip */
       .d3-tip:after {
         box-sizing: border-box;
         display: inline;
         font-size: 10px;
         width: 100%;
         line-height: 1;
         color: rgba(0, 0, 0, 0.8);
         content: "\25BC";
         position: absolute;
         text-align: center;
        }

        /* Style northward tooltips differently */
        .d3-tip.n:after {
          margin: -1px 0 0 0;
          top: 100%;
          left: 0;
        }
    </style>
</head>

<script>
d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

      var Xlabels = []
      $.each(data, function(i,e){
           Xlabels.push(e.container1)
      });

      // Tooltips
      var tip = d3.tip()
       .attr('class', 'd3-tip')
       .offset([-10,10])
       .html(function(d) {
       return "<div class='row' style='margin-left:14px'><strong>count: </strong> "+ d.value +"</div><div class='col-md-6'><strong>actual:</strong><br></div><div class='col-md-6'><strong>predicted:</strong><br></div>";
       })

      console.log(data);
      var margin = { top: 20, right: 0, bottom: 20, left: 100 },
          width = 1400 - margin.left - margin.right,
          height = 1400 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 56),
          legendElementWidth = gridSize*2,
          buckets = 9,
          colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"] // alternatively colorbrewer.YlGnBu[9]       
          labels = Xlabels;

          var colorScale = d3.scale.quantile()
              .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
              .range(colors);

          var svg = d3.select("#chart").append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

          // Call tooltips function
          svg.call(tip);

          var xLabels = svg.selectAll(".xLabel")
              .data(labels)
              .enter().append("text")
                .text(function (d) { return d.toLowerCase(); })
                .attr("x", 0)
                .attr("y", function (d, i) { return i * gridSize; })
                .style("text-anchor", "end")
                .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
                .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "xLabel mono axis yaxis" : "xLabel mono axis"); });

          var heatMap = svg.selectAll(".count")
              .data(data)
              .enter().append("rect")
              .attr("x", function(d) { return (d.y - 1) * gridSize; })
              .attr("y", function(d) { return (d.x - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "count bordered")
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", colors[0])
              .on('mouseout.tip', tip.hide)
              .on('mouseover.tip', tip.show);

          heatMap.transition().duration(1000)
              .style("fill", function(d) { return colorScale(d.value); });

          heatMap.append("title").text(function(d) { return d.value; });
              
          var legend = svg.selectAll(".legend")
              .data([0].concat(colorScale.quantiles()), function(d) { return d; })
              .enter().append("g")
              .attr("x",0)
              .attr("y",-1000)
              .attr("class", "legend");

          legend.append("rect")
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", height)
            .attr("width", legendElementWidth)
            .attr("height", gridSize / 2)
            .style("fill", function(d, i) { return colors[i]; });

          legend.append("text")
            .attr("class", "mono")
            .text(function(d) { return " ≥ " + Math.round(d); })
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", height + gridSize);
});
</script>
  <body>
    <div class="row" style="margin-top:70px;margin-left:50px">
        <div class="col-md-12">
            <h1>Container Comparison Tree</h1>
            <div id="chart"></div>
        </div>
    </div>
  </body>
</html>
