Calendar Heatmap with rCharts

This is a demo of an rCharts binding for the excellent Cal-Heatmap plugin, developed by Wan Qi Chen. This binding was motivated by a tweet by Alex Bresler and uses data provided by him on points scored by Paul George.

NOTE: This R package is not yet on github. I will update this note after I upload an alpha version on github.

forked from ramnathv's block: Calendar Heatmap with rCharts

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="https://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="https://aozora.github.io/bootplus/assets/css/docs.css">
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css'>
    
    <script src='https://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 150px;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chart77b7203f5527' class='rChart calmap'>
            </div> 
          <br/>
<pre><code class='r'>library(plyr)
dat &lt;- read.csv('https://t.co/mN2RgcyQFc')[,c('date', 'pts')]
dat2 &lt;- transform(dat, date = as.numeric(as.POSIXct(date)))
dat3 &lt;- setNames(as.list(dat2$pts), dat2$date)

library(rChartsCalendar)
r1 &lt;- plotCalMap(
  data = dat3,
  domain = 'month', 
  start = &quot;2012-10-27&quot;,
  legend = seq(10, 50, 10),
  itemName = 'point',
  range = 7
)
</code></pre>
</div>
        </div>
      </div>
    </div>
      
    <script>
var chartParams = {
 "dom": "chart77b7203f5527",
"width":    700,
"height":    400,
"data": {
 "1288152000": 4,
"1288324800": 8,
"1288411200": 8,
"1288756800": 2,
"1288929600": 10,
"1289278800": 4,
"1290056400": 3,
"1290488400": 0,
"1293598800": 0,
"1293771600": 13,
"1293944400": 5,
"1294376400": 0,
"1294462800": 10,
"1294722000": 2,
"1294808400": 16,
"1294981200": 8,
"1295240400": 6,
"1295413200": 8,
"1295672400": 7,
"1295758800": 17,
"1296018000": 10,
"1296190800": 15,
"1296277200": 8,
"1296450000": 16,
"1296622800": 13,
"1296795600": 6,
"1296968400": 14,
"1297141200": 8,
"1297227600": 7,
"1297400400": 11,
"1297486800": 11,
"1297746000": 14,
"1297832400": 0,
"1298350800": 11,
"1298437200": 10,
"1298610000": 4,
"1298782800": 7,
"1298955600": 12,
"1299042000": 8,
"1299214800": 8,
"1299301200": 8,
"1299560400": 6,
"1299646800": 8,
"1299819600": 10,
"1299992400": 6,
"1300161600": 5,
"1300248000": 15,
"1300420800": 6,
"1300507200": 6,
"1300680000": 2,
"1300852800": 8,
"1301025600": 12,
"1301112000": 5,
"1301284800": 0,
"1301457600": 8,
"1301630400": 6,
"1301803200": 3,
"1302062400": 23,
"1302235200": 7,
"1302408000": 6,
"1302667200": 2,
"1324875600": 12,
"1325048400": 18,
"1325221200": 2,
"1325307600": 7,
"1325480400": 21,
"1325653200": 13,
"1325826000": 12,
"1325912400": 6,
"1326085200": 13,
"1326258000": 5,
"1326430800": 10,
"1326517200": 17,
"1326862800": 10,
"1327035600": 7,
"1327208400": 13,
"1327381200": 7,
"1327467600": 13,
"1327640400": 16,
"1327813200": 6,
"1327986000": 24,
"1328072400": 10,
"1328245200": 30,
"1328331600": 13,
"1328590800": 14,
"1328677200": 5,
"1328850000": 8,
"1328936400": 15,
"1329195600": 12,
"1329282000": 11,
"1329368400": 11,
"1329627600": 7,
"1329800400": 20,
"1329886800": 10,
"1330405200": 11,
"1330750800": 11,
"1330923600": 21,
"1331010000": 11,
"1331355600": 12,
"1331442000": 22,
"1331611200": 11,
"1331697600": 8,
"1331870400": 5,
"1331956800": 18,
"1332216000": 7,
"1332388800": 13,
"1332475200": 15,
"1332561600": 4,
"1332734400": 16,
"1332907200": 22,
"1332993600": 7,
"1333166400": 18,
"1333252800": 9,
"1333425600": 18,
"1333512000": 9,
"1333684800": 8,
"1333771200": 2,
"1333944000": 15,
"1334116800": 6,
"1334289600": 0,
"1334376000": 10,
"1334548800": 18,
"1334635200": 9,
"1334808000": 14,
"1334980800": 16,
"1335153600": 27,
"1335326400": 7,
"1351656000": 14,
"1351828800": 12,
"1351915200": 16,
"1352091600": 14,
"1352264400": 13,
"1352437200": 11,
"1352523600": 20,
"1352782800": 12,
"1352869200": 12,
"1353042000": 11,
"1353214800": 20,
"1353301200": 6,
"1353474000": 37,
"1353646800": 15,
"1353992400": 12,
"1354251600": 4,
"1354338000": 0,
"1354597200": 34,
"1354683600": 22,
"1354856400": 22,
"1355029200": 17,
"1355288400": 27,
"1355461200": 28,
"1355547600": 15,
"1355806800": 16,
"1355893200": 20,
"1356066000": 10,
"1356152400": 17,
"1356670800": 15,
"1356757200": 18,
"1356930000": 21,
"1357102800": 29,
"1357275600": 9,
"1357362000": 8,
"1357621200": 29,
"1357794000": 24,
"1358053200": 15,
"1358226000": 16,
"1358312400": 20,
"1358485200": 31,
"1358744400": 12,
"1358917200": 22,
"1359176400": 23,
"1359349200": 23,
"1359522000": 10,
"1359694800": 15,
"1359954000": 21,
"1360040400": 29,
"1360126800": 15,
"1360299600": 26,
"1360558800": 5,
"1360731600": 23,
"1361336400": 27,
"1361509200": 12,
"1361595600": 12,
"1361854800": 21,
"1362027600": 20,
"1362114000": 22,
"1362286800": 10,
"1362546000": 16,
"1362718800": 25,
"1362891600": 10,
"1363147200": 17,
"1363320000": 20,
"1363406400": 18,
"1363579200": 14,
"1363665600": 19,
"1363924800": 20,
"1364011200": 23,
"1364184000": 13,
"1364356800": 16,
"1364443200": 24,
"1364616000": 25,
"1364788800": 23,
"1365134400": 8,
"1365220800": 2,
"1365480000": 14,
"1365739200": 21,
"1365912000": 9,
"1383019200": 24,
"1383105600": 32,
"1383364800": 21,
"1383627600": 31,
"1383714000": 21,
"1383886800": 23,
"1383973200": 24,
"1384146000": 23,
"1384491600": 22,
"1384578000": 12,
"1384923600": 35,
"1385096400": 27,
"1385182800": 19,
"1385355600": 26,
"1385528400": 15,
"1385701200": 23,
"1385874000": 27,
"1385960400": 43,
"1386133200": 19,
"1386392400": 28,
"1386478800": 32,
"1386651600": 17,
"1386910800": 10 
},
"domain": "month",
"start": "2012-10-27",
"legend": [     10,     20,     30,     40,     50 ],
"itemName": "point",
"range":      7,
"id": "chart77b7203f5527" 
}
chartParams.itemSelector = '#chart77b7203f5527'
if (chartParams.start){
  chartParams.start = new Date(chartParams.start)
}
var calchart77b7203f5527 = new CalHeatMap();
calchart77b7203f5527.init(chartParams);
</script>
    
  </body>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script 
    src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
  </script>
  <script>
    var pres = document.getElementsByTagName("pre");
    for (var i=0; i < pres.length; ++i) {
      pres[i].className = "prettyprint linenums";
    }
    prettyPrint();
  </script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js

https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js