Skip to content

Instantly share code, notes, and snippets.

@frankcleary frankcleary/index.html Secret
Last active Mar 7, 2016

Embed
What would you like to do?
Create an interactive miles over time graph using D3.js
<!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>
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
You can’t perform that action at this time.