JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<html>
  <head>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="//rawgithub.com/madams1/calendar_heatmap/master/calendar_heatmap.bundle.js"></script>
    <link href="//fonts.googleapis.com/css?family=Lato:700,400,300" rel="stylesheet" type="text/css">
    <style>
      body {
        font-family: "Lato", sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>    
  </body>
</html>

JavaScript

d3.json("https://bl.ocks.org/madams1/raw/f68685a9f5f0a0b3f7ba/fl_daily_mv_accidents_2013.json", function(err, dat) {
        calendar_heatmap.create({
          target: "#container",
          data: dat,
          date_var: "day",
          fill_var: "fatalities",
          missing_as_zero: true,
          title: "Daily Fatal Motor Vehicle Accidents in Florida (2013)",
          legend_title: "Fatalities",
          on_click: function(d) { console.log(d); }
        });
      });