-
-
Save frankcleary/43aeec03314c6b1b81e7 to your computer and use it in GitHub Desktop.
Create an interactive miles over time graph using D3.js
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 PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
<html> | |
<body> | |
<title>MPG Data</title> | |
<style> | |
.d3-tip { | |
line-height: 1; | |
font-weight: bold; | |
padding: 12px; | |
background: rgba(0, 0, 0, 0.8); | |
color: #fff; | |
border-radius: 2px; | |
} | |
path { | |
stroke: steelblue; | |
stroke-width: 3; | |
fill: none; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.datapoint:hover{ | |
fill: steelblue; | |
} | |
.xlabel, .ylabel { | |
font-weight:bold; | |
font-size:20px; | |
} | |
</style> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<script> | |
// plot a graph of miles vs. time | |
function parser(d) { | |
d.pMPG = +d.MPG; | |
d.pOdometer = +d.Odometer; | |
d.pDate = new Date(d.Date); | |
return d; | |
} | |
var format = d3.time.format("%m/%d/%Y"); | |
function milesovertime(csvdata) { | |
var margin = {top: 30, right: 30, bottom: 75, left: 100}; | |
var width = 500 - margin.left - margin.right; | |
var height = 400 - margin.top - margin.bottom; | |
var minDate = csvdata[0].pDate; | |
var maxDate = csvdata[csvdata.length - 1].pDate; | |
console.log(maxDate); | |
// Set up time based x axis | |
var x = d3.time.scale() | |
.domain([minDate, maxDate]) | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.domain([0, 10000]) | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.ticks(10) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.ticks(7) | |
.orient("left"); | |
// put the graph in the "miles" div | |
var svg = d3.select("#miles").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
// function to draw the line | |
var line = d3.svg.line() | |
.x(function(d) { return x(d.pDate); } ) | |
.y(function(d) { return y(d.pOdometer); } ); | |
//Mouseover tip | |
var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([120, 40]) | |
.html(function(d) { | |
return "<strong>" + d.Odometer + " miles</strong><br>" + | |
d.MPG + " mpg" + "<br>" + | |
format(d.pDate) + "<br>" + | |
d.Brand + ", " + d.City + " " + d.State + "<br>"; | |
}); | |
svg.call(tip); | |
// add the x axis and x-label | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll("text") | |
.attr("y", 9) | |
.attr("x", 9) | |
.attr("dy", ".35em") | |
.attr("transform", "rotate(45)") | |
.style("text-anchor", "start"); | |
svg.append("text") | |
.attr("class", "xlabel") | |
.attr("text-anchor", "middle") | |
.attr("x", width / 2) | |
.attr("y", height + margin.bottom) | |
.text("Month in 2013"); | |
// add the y axis and y-label | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(0,0)") | |
.call(yAxis); | |
svg.append("text") | |
.attr("class", "ylabel") | |
.attr("y", 0 - margin.left) // x and y switched due to rotation!! | |
.attr("x", 0 - (height / 2)) | |
.attr("dy", "1em") | |
.attr("transform", "rotate(-90)") | |
.style("text-anchor", "middle") | |
.text("Odometer reading (mi)"); | |
svg.append("text") | |
.attr("class", "graphtitle") | |
.attr("y", 10) | |
.attr("x", width/2) | |
.style("text-anchor", "middle") | |
.text("MILES OVER TIME"); | |
// draw the line | |
svg.append("path") | |
.attr("d", line(csvdata)); | |
svg.selectAll(".dot") | |
.data(csvdata) | |
.enter().append("circle") | |
.attr('class', 'datapoint') | |
.attr('cx', function(d) { return x(d.pDate); }) | |
.attr('cy', function(d) { return y(d.pOdometer); }) | |
.attr('r', 6) | |
.attr('fill', 'white') | |
.attr('stroke', 'steelblue') | |
.attr('stroke-width', '3') | |
.on('mouseover', tip.show) | |
.on('mouseout', tip.hide); | |
} | |
// Read in .csv data and make graph | |
d3.csv("prius_gas.csv", parser, | |
function(error, csvdata) { | |
milesovertime(csvdata); | |
}); | |
</script> | |
<div id="miles" class="graph"></div> | |
</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
Date | Brand | City | State | Odometer | MPG | |
---|---|---|---|---|---|---|
2/22/2013 | Texaco | Mariposa | CA | 245 | NA | |
2/24/2013 | Chevron | Berkeley | CA | 707 | 48.75 | |
3/8/2013 | Chevron | Tahoe City | CA | 1028 | 39.45 | |
3/12/2013 | Chevron | Meyers | CA | 1430 | 47.05 | |
4/8/2013 | Chevron | San Rafael | CA | 1871 | 53.09 | |
4/26/2013 | Chevron | Berkeley | CA | 2088 | 45.55 | |
4/27/2013 | Chevron | Tehachapi | CA | 2434 | 51.8 | |
4/28/2013 | Chevron | Hurricane | UT | 2812 | 52.54 | |
5/1/2013 | Chevron | Bryce | UT | 2934 | DNF | |
5/4/2013 | Texaco | Scipio | UT | 3292 | 49 | |
5/4/2013 | Chevron | Ely | NV | 3501 | 48.45 | |
5/5/2013 | Chevron | Colfax | CA | 3910 | 52.18 | |
5/24/2013 | Chevron | Vacaville | CA | 4197 | 50.7 | |
5/25/2013 | Chevron | Roseburg | OR | 4582 | 46.54 | |
5/27/2013 | Texaco | Crescent City | CA | 4954 | 47.59 | |
5/29/2013 | Chevron | Berkeley | CA | 5350 | 44.03 | |
6/5/2013 | Chevron | Berkeley | CA | 5716 | 52.81 | |
6/14/2013 | Chevron | Berkeley | CA | 6191 | 57.61 | |
6/22/2013 | Chevron | Berkeley | CA | 6721 | 56.61 | |
7/1/2013 | Chevron | Berkeley | CA | 7162 | 55.11 | |
7/9/2013 | Chevron | Berkeley | CA | 7606 | 55.36 | |
7/13/2013 | Chevron | Berkeley | CA | 7937 | 56.8 | |
7/20/2013 | Chevron | Berkeley | CA | 8364 | 55.93 | |
7/29/2013 | Chevron | Berkeley | CA | 8897 | 55.73 | |
8/4/2013 | Chevron | Berkeley | CA | 9191 | 56.17 | |
8/20/2013 | Chevron | Berkeley | CA | 9678 | 53.69 | |
8/23/2013 | Texaco | Mariposa | CA | 9871 | 52.96 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment