d3.unconf 2015

data.json

[
  {
    "date": "10/1/2015",
    "miles_driven": 35,
    "trips": [
      {
        "miles_driven": 17,
        "time": "13:26"
      },
      {
        "miles_driven": 10,
        "time": "17:02"
      },
      {
        "miles_driven": 8,
        "time": "23:14"
      }
    ]
  },
  {
    "date": "10/2/2015",
    "miles_driven": 40,
    "trips": [
      {
        "miles_driven": 11,
        "time": "10:33"
      },
      {
        "miles_driven": 14,
        "time": "14:23"
      },
      {
        "miles_driven": 10,
        "time": "17:59"
      },
      {
        "miles_driven": 5,
        "time": "18:47"
      }
    ]
  },
  {
    "date": "10/3/2015",
    "miles_driven": 51,
    "trips": [
      {
        "miles_driven": 11,
        "time": "15:44"
      },
      {
        "miles_driven": 10,
        "time": "17:39"
      },
      {
        "miles_driven": 18,
        "time": "20:34"
      },
      {
        "miles_driven": 12,
        "time": "20:31"
      }
    ]
  },
  {
    "date": "10/4/2015",
    "miles_driven": 50,
    "trips": [
      {
        "miles_driven": 10,
        "time": "10:53"
      },
      {
        "miles_driven": 17,
        "time": "12:50"
      },
      {
        "miles_driven": 22,
        "time": "16:49"
      },
      {
        "miles_driven": 1,
        "time": "18:50"
      }
    ]
  },
  {
    "date": "10/5/2015",
    "miles_driven": 34,
    "trips": [
      {
        "miles_driven": 10,
        "time": "10:04"
      },
      {
        "miles_driven": 13,
        "time": "15:59"
      },
      {
        "miles_driven": 10,
        "time": "15:38"
      },
      {
        "miles_driven": 1,
        "time": "17:04"
      }
    ]
  },
  {
    "date": "10/6/2015",
    "miles_driven": 81,
    "trips": [
      {
        "miles_driven": 14,
        "time": "11:49"
      },
      {
        "miles_driven": 16,
        "time": "13:15"
      },
      {
        "miles_driven": 22,
        "time": "13:19"
      },
      {
        "miles_driven": 13,
        "time": "16:53"
      },
      {
        "miles_driven": 16,
        "time": "18:49"
      }
    ]
  },
  {
    "date": "10/7/2015",
    "miles_driven": 35,
    "trips": [
      {
        "miles_driven": 18,
        "time": "11:01"
      },
      {
        "miles_driven": 14,
        "time": "13:35"
      },
      {
        "miles_driven": 3,
        "time": "16:18"
      }
    ]
  },
  {
    "date": "10/8/2015",
    "miles_driven": 3,
    "trips": [
      {
        "miles_driven": 3,
        "time": "12:28"
      }
    ]
  },
  {
    "date": "10/9/2015",
    "miles_driven": 48,
    "trips": [
      {
        "miles_driven": 17,
        "time": "17:41"
      },
      {
        "miles_driven": 21,
        "time": "23:39"
      },
      {
        "miles_driven": 10,
        "time": "25:10"
      }
    ]
  },
  {
    "date": "10/10/2015",
    "miles_driven": 49,
    "trips": [
      {
        "miles_driven": 14,
        "time": "15:13"
      },
      {
        "miles_driven": 17,
        "time": "19:48"
      },
      {
        "miles_driven": 16,
        "time": "20:04"
      },
      {
        "miles_driven": 2,
        "time": "21:19"
      }
    ]
  },
  {
    "date": "10/11/2015",
    "miles_driven": 84,
    "trips": [
      {
        "miles_driven": 12,
        "time": "11:25"
      },
      {
        "miles_driven": 14,
        "time": "12:01"
      },
      {
        "miles_driven": 14,
        "time": "13:50"
      },
      {
        "miles_driven": 25,
        "time": "15:01"
      },
      {
        "miles_driven": 12,
        "time": "17:57"
      },
      {
        "miles_driven": 7,
        "time": "19:42"
      }
    ]
  },
  {
    "date": "10/12/2015",
    "miles_driven": 5,
    "trips": [
      {
        "miles_driven": 5,
        "time": "15:13"
      }
    ]
  },
  {
    "date": "10/13/2015",
    "miles_driven": 40,
    "trips": [
      {
        "miles_driven": 22,
        "time": "16:06"
      },
      {
        "miles_driven": 12,
        "time": "16:55"
      },
      {
        "miles_driven": 6,
        "time": "23:51"
      }
    ]
  },
  {
    "date": "10/14/2015",
    "miles_driven": 7,
    "trips": [
      {
        "miles_driven": 7,
        "time": "15:02"
      }
    ]
  },
  {
    "date": "10/15/2015",
    "miles_driven": 4,
    "trips": [
      {
        "miles_driven": 4,
        "time": "11:46"
      }
    ]
  },
  {
    "date": "10/16/2015",
    "miles_driven": 26,
    "trips": [
      {
        "miles_driven": 24,
        "time": "15:50"
      },
      {
        "miles_driven": 2,
        "time": "16:22"
      }
    ]
  },
  {
    "date": "10/17/2015",
    "miles_driven": 84,
    "trips": [
      {
        "miles_driven": 21,
        "time": "10:56"
      },
      {
        "miles_driven": 24,
        "time": "12:44"
      },
      {
        "miles_driven": 11,
        "time": "15:37"
      },
      {
        "miles_driven": 13,
        "time": "17:06"
      },
      {
        "miles_driven": 12,
        "time": "19:33"
      },
      {
        "miles_driven": 3,
        "time": "22:21"
      }
    ]
  },
  {
    "date": "10/18/2015",
    "miles_driven": 90,
    "trips": [
      {
        "miles_driven": 17,
        "time": "13:15"
      },
      {
        "miles_driven": 22,
        "time": "14:43"
      },
      {
        "miles_driven": 14,
        "time": "17:16"
      },
      {
        "miles_driven": 17,
        "time": "18:36"
      },
      {
        "miles_driven": 10,
        "time": "21:34"
      },
      {
        "miles_driven": 10,
        "time": "21:07"
      }
    ]
  },
  {
    "date": "10/19/2015",
    "miles_driven": 1,
    "trips": [
      {
        "miles_driven": 1,
        "time": "14:45"
      }
    ]
  },
  {
    "date": "10/20/2015",
    "miles_driven": 13,
    "trips": [
      {
        "miles_driven": 12,
        "time": "10:40"
      },
      {
        "miles_driven": 1,
        "time": "12:50"
      }
    ]
  },
  {
    "date": "10/21/2015",
    "miles_driven": 91,
    "trips": [
      {
        "miles_driven": 12,
        "time": "10:29"
      },
      {
        "miles_driven": 16,
        "time": "12:27"
      },
      {
        "miles_driven": 20,
        "time": "15:04"
      },
      {
        "miles_driven": 24,
        "time": "16:11"
      },
      {
        "miles_driven": 12,
        "time": "18:04"
      },
      {
        "miles_driven": 7,
        "time": "20:39"
      }
    ]
  },
  {
    "date": "10/22/2015",
    "miles_driven": 74,
    "trips": [
      {
        "miles_driven": 16,
        "time": "13:19"
      },
      {
        "miles_driven": 20,
        "time": "14:48"
      },
      {
        "miles_driven": 25,
        "time": "18:13"
      },
      {
        "miles_driven": 12,
        "time": "20:28"
      },
      {
        "miles_driven": 1,
        "time": "20:06"
      }
    ]
  },
  {
    "date": "10/23/2015",
    "miles_driven": 87,
    "trips": [
      {
        "miles_driven": 11,
        "time": "11:06"
      },
      {
        "miles_driven": 25,
        "time": "12:24"
      },
      {
        "miles_driven": 25,
        "time": "12:48"
      },
      {
        "miles_driven": 11,
        "time": "15:45"
      },
      {
        "miles_driven": 13,
        "time": "15:05"
      },
      {
        "miles_driven": 2,
        "time": "18:39"
      }
    ]
  },
  {
    "date": "10/24/2015",
    "miles_driven": 13,
    "trips": [
      {
        "miles_driven": 12,
        "time": "21:00"
      },
      {
        "miles_driven": 1,
        "time": "23:29"
      }
    ]
  },
  {
    "date": "10/25/2015",
    "miles_driven": 94,
    "trips": [
      {
        "miles_driven": 17,
        "time": "10:03"
      },
      {
        "miles_driven": 15,
        "time": "11:20"
      },
      {
        "miles_driven": 10,
        "time": "12:11"
      },
      {
        "miles_driven": 22,
        "time": "13:29"
      },
      {
        "miles_driven": 25,
        "time": "14:12"
      },
      {
        "miles_driven": 5,
        "time": "17:07"
      }
    ]
  },
  {
    "date": "10/26/2015",
    "miles_driven": 90,
    "trips": [
      {
        "miles_driven": 22,
        "time": "12:34"
      },
      {
        "miles_driven": 24,
        "time": "13:25"
      },
      {
        "miles_driven": 17,
        "time": "14:51"
      },
      {
        "miles_driven": 18,
        "time": "15:11"
      },
      {
        "miles_driven": 9,
        "time": "18:40"
      }
    ]
  },
  {
    "date": "10/27/2015",
    "miles_driven": 16,
    "trips": [
      {
        "miles_driven": 12,
        "time": "17:41"
      },
      {
        "miles_driven": 4,
        "time": "20:45"
      }
    ]
  },
  {
    "date": "10/28/2015",
    "miles_driven": 45,
    "trips": [
      {
        "miles_driven": 15,
        "time": "14:26"
      },
      {
        "miles_driven": 22,
        "time": "19:46"
      },
      {
        "miles_driven": 8,
        "time": "23:18"
      }
    ]
  },
  {
    "date": "10/29/2015",
    "miles_driven": 24,
    "trips": [
      {
        "miles_driven": 15,
        "time": "14:52"
      },
      {
        "miles_driven": 9,
        "time": "19:09"
      }
    ]
  },
  {
    "date": "10/30/2015",
    "miles_driven": 64,
    "trips": [
      {
        "miles_driven": 16,
        "time": "15:30"
      },
      {
        "miles_driven": 19,
        "time": "18:06"
      },
      {
        "miles_driven": 22,
        "time": "22:08"
      },
      {
        "miles_driven": 7,
        "time": "22:31"
      }
    ]
  },
  {
    "date": "10/31/2015",
    "miles_driven": 96,
    "trips": [
      {
        "miles_driven": 23,
        "time": "12:54"
      },
      {
        "miles_driven": 21,
        "time": "14:41"
      },
      {
        "miles_driven": 25,
        "time": "17:13"
      },
      {
        "miles_driven": 13,
        "time": "19:17"
      },
      {
        "miles_driven": 12,
        "time": "21:48"
      },
      {
        "miles_driven": 2,
        "time": "23:26"
      }
    ]
  }
]

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mileage Calendar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="block">
    <h3>Mileage Calendar</h3>
    <strong>October</strong>
    <div class="table"></div>
    <div class="info"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
  <script src="script.js"></script>
</body>
</html>

script.js

var TripCalendar;

d3.json('data.json', function(data) {
  return new TripCalendar(data, d3.select('.block .table'));
});

TripCalendar = (function() {
  function TripCalendar(data1, container1) {
    var bbox;
    this.data = data1;
    this.container = container1 != null ? container1 : d3.select('body');
    bbox = this.container.node().getBoundingClientRect();
    this.boxDimension = bbox.width / 7;
    this.circleR = this.boxDimension / 2;
    this.buildTable();
    this.populateTable();
  }

  TripCalendar.prototype.buildTable = function() {
    var i, j, results, table, tbody;
    table = this.container.insert('table');
    tbody = table.append('tbody');
    results = [];
    for (i = j = 1; j <= 5; i = ++j) {
      results.push(this.buildRow(tbody));
    }
    return results;
  };

  TripCalendar.prototype.buildRow = function(container) {
    var i, j, results, tr;
    tr = container.append('tr');
    results = [];
    for (i = j = 1; j <= 7; i = ++j) {
      results.push(tr.append('td'));
    }
    return results;
  };

  TripCalendar.prototype.populateTable = function() {
    var self, svg, td;
    self = this;
    td = d3.selectAll('td').filter(function(d, i) {
      return i > 0;
    }).data(this.data).attr('class', function(d) {
      if (d.miles_driven < 40) {
        return 'safe';
      }
      if (d.miles_driven > 70) {
        return 'danger';
      }
      return 'warning';
    }).text(function(d) {
      return d.date.split('/')[1];
    }).on('mouseenter', function() {
      td = d3.select(this);
      return td.select('svg text').classed('hidden', false);
    }).on('mouseleave', function() {
      td = d3.select(this);
      return td.select('text').classed('hidden', true);
    }).on('click', function(d) {
      return d3.select('.block .info').html(function() {
        var html, j, len, ref, segment;
        html = "Trips for <strong>" + d.date + "</strong>: <br><ul>";
        ref = d.trips;
        for (j = 0, len = ref.length; j < len; j++) {
          segment = ref[j];
          html += "<li>time: " + segment.time + " :: miles: " + segment.miles_driven + "</li>";
        }
        html += "</ul>";
        return html;
      });
    });
    svg = td.append('svg');
    svg.append('circle').attr('r', function(d) {
      return self.circleR * d.miles_driven / 100;
    }).attr('cx', self.circleR).attr('cy', self.circleR);
    return svg.append('text').attr('dx', -6).attr('dy', self.circleR + 6).html(function(d) {
      return d.miles_driven + ' miles';
    }).classed('hidden', true);
  };

  return TripCalendar;

})();

//# sourceMappingURL=script.js.map

styles.css

body {
  font-family: helvetica;
  font-size: .7em;
  color: #222; }

ul, li {
  margin: 0px;
  padding: 0px; }

ul {
  margin-left: 22px;
  line-height: 1.3em; }

.block {
  margin: 20px 0 0 20px;
  width: 350px;
  height: 250px; }
  .block h3 {
    text-align: center; }

td {
  position: relative;
  z-index: 0;
  font-size: .5em; }
  td:hover {
    z-index: 100; }
  td svg {
    overflow: visible;
    width: 50px;
    height: 50px; }
  td text {
    -moz-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    -webkit-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    font-size: 3em;
    cursor: pointer; }
    td text.hidden {
      opacity: 0; }
  td circle {
    position: absolute;
    cursor: pointer;
    -moz-transition: r 0.3s ease-out, fill 0.3s ease-out 0s;
    -o-transition: r 0.3s ease-out, fill 0.3s ease-out 0s;
    -webkit-transition: r 0.3s ease-out, fill 0.3s ease-out 0s;
    transition: r 0.3s ease-out, fill 0.3s ease-out 0s; }
  td:hover circle {
    r: 40; }
  td.danger circle {
    fill: #d9534f;
    stroke: #d43f3a; }
  td.danger:hover circle {
    fill: #f4cecd; }
  td.danger text {
    fill: #d43f3a; }
  td.warning circle {
    fill: #f0ad4e;
    stroke: #eea236; }
  td.warning:hover circle {
    fill: #fceedb; }
  td.warning text {
    fill: #eea236; }
  td.safe circle {
    fill: #5cb85c;
    stroke: #4cae4c; }
  td.safe:hover circle {
    fill: #c7e6c7; }
  td.safe text {
    fill: #4cae4c; }

/*# sourceMappingURL=styles.css.map */