D3-punchcard-extended NPM

d3-punchcard-extended

Punchcard with D3.js.

npm.io

Install

$ npm install d3-punchcard-extended

Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="d3-punchcard.min.js"></script>
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: #333;
      stroke-width: 1px;
      shape-rendering: crispEdges;
    }
    .axis text {
      font-size: 0.875em;
    }
  </style>
</head>
<body>
  <div id="example"></div>
</body>
</html>

var chart = punchcard({
  target: '#chart',
  width: 600,
  height: 400,
  margin: {
    top: 20,
    right: 20,
    bottom: 40,
    left: 100
  },
  color: '#444',
  xticks: ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'],
  yticks: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
});
  
chart.render([
  [0, 0, 4],
  [0, 1, 6],
  [0, 2, 1],
  [0, 3, 0],
  // ... ...
])

API

punchcard(options)
chart.render(data)
chart.clear()

License

6 years ago

6 years ago