Skip to content

Instantly share code, notes, and snippets.

@chrisparnin

chrisparnin/cal-heat-map.js

Created July 9, 2016 00:47
Show Gist options
  • Save chrisparnin/e87996e85e2dc2a454264dc6fb702d82 to your computer and use it in GitHub Desktop.
Save chrisparnin/e87996e85e2dc2a454264dc6fb702d82 to your computer and use it in GitHub Desktop.
Download ZIP
Demo Calendar Heat map
Raw
cal-heat-map.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Focus sessions</title>
<meta name="description" content="pomodoro">
<meta name="author" content="Chris Parnin">
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap/cal-heatmap.js"></script>
<link rel="stylesheet" href="bower_components//cal-heatmap/cal-heatmap.css" />
<style type="text/css">
h3 { color:#98210E; }
.cal-heatmap-container .q5{fill:#98210E;}
.cal-heatmap-container .q4{fill:#E5442B;}
.cal-heatmap-container .q3{fill:#FF6249;}
.cal-heatmap-container .q2{fill:#2BE590;}
.cal-heatmap-container .q1{fill:#009853;}
</style>
</head>
<body>
<h3>Your focus</h3>
<div id="cal-heatmap"></div>
<script type="text/javascript">
var cal = new CalHeatMap();
//var d = {946705035: 25};
var seconds = Math.floor((new Date).getTime()/1000);
var d = {};
d[seconds] = 25;
d[(seconds-(86400*3))]=26;
d[(seconds-(86400*5))]=2;
d[(seconds+(86400*7))]=16;
d[(seconds+(86400*30))]=162;
console.log(d);
cal.init({
data: d,
//itemSelector: "#domain-b",
domain: "month",
subDomain: "day",
//cellSize: 20, subDomainTextFormat: "%d",
domainGutter: 10,
range: 4
//legendColors: ["#FF9484", "#98210E"]
// 98210E
// E5442B
// FF6249
// 009853
// 2BE590
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment