Last active
October 25, 2015 01:39
-
-
Save vanceingalls/84bd24a3332ff3f71588 to your computer and use it in GitHub Desktop.
d3.unconf 2015
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"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" | |
} | |
] | |
} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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