nice heatmap

by Nivaldo

HTML

<div id="chart"></div>

CSS

rect.bordered {
        stroke: #fff;
        /*stroke-width:2px;   */
      }
      .legend:nth-child(2) rect text {
        display: none;
      }
      text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        /*fill: #aaa;*/
      }

      text.axis-workweek {
        fill: #000;
      }

      text.axis-worktime {
        fill: #000;
      }

      .legend {
        position: relative;
        top: 10px;
      }

JavaScript

var margin = { top: 100, right: 0, bottom: 100, left: 100 },
          width = 1200 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 48),
          legendElementWidth = gridSize * 2,
          buckets = 6,
          colors = ["#C28700", "#E8AA11", "#1CB000", "#FF0000","#DB0000"], // alternatively colorbrewer.YlGnBu[9]
          // days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su", "Mo"],
          times = ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30","12:00", "12:30","13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];

          // var time_len = times.length
          // console.log(time_len)
        var data =...