Punchcard with D3.js.
$ npm install d3-punchcard<!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: '#example'
});
chart.render([
[0, 0, 4],
[0, 1, 6],
[0, 2, 1],
[0, 3, 0],
// ... ...
])punchcard(options)chart.render(data)chart.clear()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent