frankcleary/index.html Secret

## index.html
<!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>

## prius_gas.csv

          
            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
	<!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