| [ | |
| { | |
| "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" | |
| } | |
| ] | |
| } | |
| ] |
| <!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> |
| 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 |
| 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 */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment