D3 Playground

by Mohannad Najjar

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

<body>
  <div id="example"></div>
</body>

CSS

.axis path,
    .axis line {
      fill: none;
      stroke: #333;
      stroke-width: 1px;
      shape-rendering: crispEdges;
    }
    .axis text {
      font-size: 0.875em;
    }

JavaScript

var chart = punchcard({
  target: '#example'
});

let firstPunch = [
  [0, 0, 2 ],
  [0, 1, 1 ],
  [0, 2, 7 ],
  [0, 3, 0 ],
  [0, 4, 2 ],
  [0, 5, 3 ],
  [0, 6, 0 ],
  [0, 7, 0 ],
  [0, 8, 0 ],
  [0, 9, 0 ],
  [0, 10, 0 ],
  [0, 11, 0 ],
  [0, 12, 0 ],
  [0, 13, 0 ],
  [0, 14, 0 ],
  [0, 15, 0 ],
  [0, 16, 0 ],
  [0, 17, 0 ],
  [0, 18, 0 ],
  [0, 19, 0 ],
  [0, 20, 0 ],
  [0, 21, 0 ],
  [0, 22, 0 ],
  [0, 23, 0 ],
  [1, 0, 0 ],
  [1, 1, 0 ],
  [1, 2, 0 ],
  [1, 3, 0 ],
  [1, 4, 4 ],
  [1, 5, 4 ],
  [1, 6, 2 ],
  [1, 7, 0 ],
  [1, 8, 0 ],
  [1, 9, 0 ],
  [1, 10, 0 ],
  [1, 11, 0 ],
  [1, 12, 0 ],
  [1, 13, 0 ],
  [1, 14, 0 ],
  [1, 15, 0 ],
  [1, 16, 0 ],
  [1, 17, 0 ],
  [1, 18, 0 ],
  [1, 19, 0 ],
  [1, 20, 6 ],
  [1, 21, 0 ],
  [1, 22, 0 ],
  [1, 23, 1 ],
  [2, 0, 0 ],
  [2, 1, 1 ],
  [2, 2, 0 ],
  [2, 3, 0 ],
  [2, 4, 1 ],
  [2, 5, 1 ],
  [2, 6, 0 ],
  [2, 7, 0 ],
  [2, 8, 0 ],
  [2, 9, 0 ],
  [2, 10, 0 ],
  [2, 11, 0 ],
  [2, 12, 0 ],
  [2, 13, 0 ],
  [2, 14, 0 ],
  [2, 15, 0 ],
  [2, 16, 0 ],
  [2, 17, 0 ],
  [2, 18, 0 ],
  [2, 19, 0 ],
  [2, 20, 1 ],
  [2, 21, 1 ],
  [2, 22, 1 ],
  [2, 23, 0 ],
  [3, 0, 1 ],
  [3, 1, 0 ],
  [3, 2, 3 ],
  [3, 3, 3 ],
  [3, 4, 2 ],
  [3, 5, 0 ],
  [3, 6, 2 ],
  [3, 7, 0 ],
  [3, 8, 0 ],
  [3, 9, 0 ],
  [3, 10, 0 ],
  [3, 11, 0 ],
  [3, 12, 0 ],
  [3, 13, 1 ],
  [3, 14, 0 ],
  [3, 15, 0 ],
  [3, 16, 0 ],
  [3, 17, 0 ],
  [3, 18, 0 ],
  [3, 19, 0 ],
  [3, 20, 0 ],
  [3, 21, 0 ],
  [3, 22, 1 ],
  [3, 23, 1 ],
  [4, 0, 7 ],
  [4, 1, 0 ],
  [4, 2, 3 ],
  [4, 3, 1 ],
  [4, 4, 0 ],
  [4, 5, 5 ],
  [4, 6, 1 ],
  [4, 7, 0 ],
  [4, 8, 0 ],
  [4, 9, 0 ],
  [4, 10, 0 ],
  [4, 11, 0 ],
  [4, 12, 2 ],
  [4, 13, 0 ],
  [4, 14, 0 ],
  [4, 15, 0 ],
  [4, 16, 1 ],
  [4, 17, 0 ],
  [4, 18, 0 ],
  [4, 19, 0 ],
  [4, 20, 0 ],
  [4, 21, 0 ],
  [4, 22, 1 ],
  [4, 23, 0 ],
  [5, 0, 0 ],
  [5, 1, 10 ],
  [5, 2, 1 ],
  [5, 3, 7 ],
  [5, 4, 1 ],
  [5, 5, 3 ],
  [5, 6, 5 ],
  [5, 7, 0 ],
  [5, 8, 0 ],
  [5, 9, 0 ],
  [5, 10, 0 ],
  [5, 11, 0 ],
  [5,...