CafeConVega/custom.css

## custom.css
h1,
h2 {
    font-family: 'Graduate', cursive;
    text-align: center;
    text-transform: uppercase;
}

p {
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

table {
    font-family: 'Roboto', sans-serif;
    font-size: .9em;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: .5em;
}

td {
    padding: .5em;
    border-right: 1px dotted #E6E6E6;
}

td:last-of-type {
    border-right: 0px;
}

thead tr {
    border-bottom: 1px solid black;
}

tbody tr:hover {
    color: white;
    background-color: darkgray;
}


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>MIA vs. HOU Game Stats</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <link href="custom.css" rel="stylesheet" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Graduate|Roboto' rel='stylesheet' type='text/css'>
</head>

<body>
    <h1>Houston Texans at Miami Dolphins</h1>
     <h2>October 26, 2015 1:00 PM - Sun Life Stadium - Miami, FL</h2>
        <p>Source: <a href="http://www.pro-football-reference.com/" target="_blank">Pro-Football-Reference</a></p>
        <h2>Individual Game Statistics - Passing</h2>
		<div id="table_pass" class="table"></div>

    <script>
        //Load in contents of CSV file
        d3.csv("mia-hou_off_individual_stats.csv", function (error, data) {
         if (error) {
          console.log(error);  //Log the error.
        } else {
          console.log(data);   //Log the data.
        }

        //Vars for subsets of the raw data for different tables
        var data_pass = [];
        var data_rush = [];
        var data_rec = [];

            // Format number fields
            data.forEach(function (d) {
                d.pass_comp = +d.pass_comp;
                d.pass_att = +d.pass_att;
                d.pass_comp_rate = Math.round(d.pass_comp/d.pass_att*100); //Calculated field
                d.pass_yards = +d.pass_yards;
                d.pass_avg_comp = Math.round(d.pass_yards/d.pass_comp); //Calculated field
                d.pass_td = +d.pass_td;
                d.pass_int = +d.pass_int;
                d.pass_sack = +d.pass_sack;
                d.pass_sack_yards = +d.pass_sack_yards;
                d.pass_long = +d.pass_long;
                d.pass_qbr = +d.pass_qbr;
                d.rush_att = +d.rush_att;
                d.rush_yards = +d.rush_yards;
                d.rush_avg = Math.round(d.rush_yards/d.rush_att); //Calculated field
                d.rush_td = +d.rush_td;
                d.rush_long = +d.rush_long;
                d.rec_target = +d.rec_target;
                d.rec_rec = +d.rec_rec;
                d.rev_catch_rate = Math.round(d.rec_rec/d.rec_target*100); //Calculated field
                d.rec_yards = +d.rec_yards;
                d.rev_avg = Math.round(d.rec_yards/d.rec_rec); //Calculated field
                d.rec_td = +d.rec_td;
                d.rec_long = +d.rec_long;
                d.fmb = +d.fmb;
                d.fmb_lost = +d.fmb_lost;

            // Add pass data to array
            if(d.pass_att > 0) {
                data_pass.push([d.team, d.player, d.pass_qbr, d.pass_comp+" / "+d.pass_att,  d.pass_comp_rate+"%", d.pass_yards+" - "+d.pass_avg_comp, d.pass_long, d.pass_td, d.pass_int, d.pass_sack+" - "+ d.pass_sack_yards, d.fmb+" - "+d.fmb_lost]);
                }

            // Add rush data to array
            if(d.rush_att > 0) {
                data_rush.push([d.team, d.player, d.rush_att, d.rush_yards, d.rush_avg, d.rush_td, d.rush_long, d.fmb, d.fmb_lost]);
                }

             // Add reception data to array
            if(d.rec_target > 0) {
                data_rec.push([d.team, d.player, d.rec_target, d.rec_rec, d.rec_catch_rate, d.rec_yards, d.rec_avg, d.rec_long, d.rec_td, d.fmb, d.fmb_lost]);
                }
            }); //end of foreach

            data_pass.sort(d3.ascending); //Sort alphabetically

            console.log(data_pass);
            console.log(data_rush);
            console.log(data_rec);

            //Pass Table
                var table = d3.select("#table_pass").append("table");

				var header = table.append("thead").append("tr");

				header
					.selectAll("th")
					.data(["TEAM", "PLAYER", "RATING", "COMP. / ATT.", "COMP. RATE", "YARDS - AVG", "LONG PASS", "TD", "INT", "SACKS - YARDS", "FUMBLES - LOST"])
					.enter()
					.append("th")
          .text(function(d) { return d; });

        var tablebody = table.append("tbody");

        rows = tablebody
        	.selectAll("tr")
        	.data(data_pass)
        	.enter()
        	.append("tr");

        cells = rows.selectAll("td")
        	.data(function(d) {
        		console.log(d);
        		return d;
        	})
        	.enter()
        	.append("td")
        	.text(function(d) {
        		return d;
        	});
        }); // End pass table

    </script>

</body>

</html>

## mia-hou_off_individual_stats.csv

          
            player
            team
            pass_comp
            pass_att
            pass_yards
            pass_td
            pass_int
            pass_sack
            pass_sack_yards
            pass_long
            pass_qbr
            rush_att
            rush_yards
            rush_td
            rush_long
            rec_target
            rec_rec
            rec_yards
            rec_td
            rec_long
            fmb
            fmb_lost

            
              Brian Hoyer
              HOU
              23
              49
              273
              3
              1
              4
              22
              27
              76.3
              
              
              2
              0

            
              Nate Washington
              HOU
              
              
              16
              9
              127
              2
              27

            
              Arian Foster
              HOU
              
              
              18
              59
              1
              11
              7
              5
              66
              1
              26

            
              DeAndre Hopkins
              HOU
              
              
              12
              6
              50
              0
              11
              1
              0

            
              Chris Polk
              HOU
              
              
              4
              4
              0
              5
              3
              2
              14
              0
              8

            
              Keith Mumphery
              HOU
              
              
              3
              1
              16
              0
              16

            
              Alfred Blue
              HOU
              
              
              3
              8
              0
              3

            
              Jaelen Strong
              HOU
              
              
              1
              0
              0
              0
              0

            
              Garrett Graham
              HOU
              
              
              4
              0
              0
              0
              0

            
              Jonathan Grimes
              HOU
              
              
              1
              0
              0
              0
              0

            
              C.J. Fiedorowicz
              hou
              
              
              2
              0
              0
              0
              0

            
              Lamar Miller
              MIA
              
              
              14
              175
              1
              85
              3
              3
              61
              1
              54

            
              Ryan Tannehill
              MIA
              18
              19
              282
              4
              0
              4
              41
              54
              158.3
              1
              3
              0
              3

            
              Jarvis Landry
              MIA
              
              
              1
              5
              0
              5
              5
              5
              83
              2
              50

            
              Rishard Matthews
              MIA
              
              
              3
              3
              75
              1
              53

            
              Jonas Gray
              MIA
              
              
              12
              48
              0
              16
              1
              1
              10
              0
              10

            
              Greg Jennings
              MIA
              
              
              2
              2
              37
              0
              23

            
              Damien Williams
              MIA
              
              
              4
              19
              0
              19
              2
              2
              10
              0
              8
              1
              1

            
              Jordan Cameron
              MIA
              
              
              2
              2
              23
              0
              12

            
              Matt Moore
              MIA
              1
              1
              14
              0
              0
              0
              0
              14
              118.7
              3
              -2
              0
              0

            
              Dion Sims
              MIA
              
              
              2
              1
              -3
              0
              -3
	h1,
	h2 {
	font-family: 'Graduate', cursive;
	text-align: center;
	text-transform: uppercase;
	}

	p {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	}

	table {
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: .5em;
	}

	td {
	padding: .5em;
	border-right: 1px dotted #E6E6E6;
	}

	td:last-of-type {
	border-right: 0px;
	}

	thead tr {
	border-bottom: 1px solid black;
	}

	tbody tr:hover {
	color: white;
	background-color: darkgray;
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>MIA vs. HOU Game Stats</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<link href="custom.css" rel="stylesheet" type="text/css" />
	<link href='https://fonts.googleapis.com/css?family=Graduate\|Roboto' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<h1>Houston Texans at Miami Dolphins</h1>
	<h2>October 26, 2015 1:00 PM - Sun Life Stadium - Miami, FL</h2>
	<p>Source: <a href="http://www.pro-football-reference.com/" target="_blank">Pro-Football-Reference</a></p>
	<h2>Individual Game Statistics - Passing</h2>
	<div id="table_pass" class="table"></div>

	<script>
	//Load in contents of CSV file
	d3.csv("mia-hou_off_individual_stats.csv", function (error, data) {
	if (error) {
	console.log(error); //Log the error.
	} else {
	console.log(data); //Log the data.
	}

	//Vars for subsets of the raw data for different tables
	var data_pass = [];
	var data_rush = [];
	var data_rec = [];

	// Format number fields
	data.forEach(function (d) {
	d.pass_comp = +d.pass_comp;
	d.pass_att = +d.pass_att;
	d.pass_comp_rate = Math.round(d.pass_comp/d.pass_att*100); //Calculated field
	d.pass_yards = +d.pass_yards;
	d.pass_avg_comp = Math.round(d.pass_yards/d.pass_comp); //Calculated field
	d.pass_td = +d.pass_td;
	d.pass_int = +d.pass_int;
	d.pass_sack = +d.pass_sack;
	d.pass_sack_yards = +d.pass_sack_yards;
	d.pass_long = +d.pass_long;
	d.pass_qbr = +d.pass_qbr;
	d.rush_att = +d.rush_att;
	d.rush_yards = +d.rush_yards;
	d.rush_avg = Math.round(d.rush_yards/d.rush_att); //Calculated field
	d.rush_td = +d.rush_td;
	d.rush_long = +d.rush_long;
	d.rec_target = +d.rec_target;
	d.rec_rec = +d.rec_rec;
	d.rev_catch_rate = Math.round(d.rec_rec/d.rec_target*100); //Calculated field
	d.rec_yards = +d.rec_yards;
	d.rev_avg = Math.round(d.rec_yards/d.rec_rec); //Calculated field
	d.rec_td = +d.rec_td;
	d.rec_long = +d.rec_long;
	d.fmb = +d.fmb;
	d.fmb_lost = +d.fmb_lost;

	// Add pass data to array
	if(d.pass_att > 0) {
	data_pass.push([d.team, d.player, d.pass_qbr, d.pass_comp+" / "+d.pass_att, d.pass_comp_rate+"%", d.pass_yards+" - "+d.pass_avg_comp, d.pass_long, d.pass_td, d.pass_int, d.pass_sack+" - "+ d.pass_sack_yards, d.fmb+" - "+d.fmb_lost]);
	}

	// Add rush data to array
	if(d.rush_att > 0) {
	data_rush.push([d.team, d.player, d.rush_att, d.rush_yards, d.rush_avg, d.rush_td, d.rush_long, d.fmb, d.fmb_lost]);
	}

	// Add reception data to array
	if(d.rec_target > 0) {
	data_rec.push([d.team, d.player, d.rec_target, d.rec_rec, d.rec_catch_rate, d.rec_yards, d.rec_avg, d.rec_long, d.rec_td, d.fmb, d.fmb_lost]);
	}
	}); //end of foreach

	data_pass.sort(d3.ascending); //Sort alphabetically

	console.log(data_pass);
	console.log(data_rush);
	console.log(data_rec);

	//Pass Table
	var table = d3.select("#table_pass").append("table");

	var header = table.append("thead").append("tr");

	header
	.selectAll("th")
	.data(["TEAM", "PLAYER", "RATING", "COMP. / ATT.", "COMP. RATE", "YARDS - AVG", "LONG PASS", "TD", "INT", "SACKS - YARDS", "FUMBLES - LOST"])
	.enter()
	.append("th")
	.text(function(d) { return d; });

	var tablebody = table.append("tbody");

	rows = tablebody
	.selectAll("tr")
	.data(data_pass)
	.enter()
	.append("tr");

	cells = rows.selectAll("td")
	.data(function(d) {
	console.log(d);
	return d;
	})
	.enter()
	.append("td")
	.text(function(d) {
	return d;
	});
	}); // End pass table

	</script>

	</body>

	</html>
player	team	pass_comp	pass_att	pass_yards	pass_td	pass_int	pass_sack	pass_sack_yards	pass_long	pass_qbr	rush_att	rush_yards	rush_td	rush_long	rec_target	rec_rec	rec_yards	rec_td	rec_long	fmb	fmb_lost
Brian Hoyer	HOU	23	49	273	3	1	4	22	27	76.3										2	0
Nate Washington	HOU														16	9	127	2	27
Arian Foster	HOU										18	59	1	11	7	5	66	1	26
DeAndre Hopkins	HOU														12	6	50	0	11	1	0
Chris Polk	HOU										4	4	0	5	3	2	14	0	8
Keith Mumphery	HOU														3	1	16	0	16
Alfred Blue	HOU										3	8	0	3
Jaelen Strong	HOU														1	0	0	0	0
Garrett Graham	HOU														4	0	0	0	0
Jonathan Grimes	HOU														1	0	0	0	0
C.J. Fiedorowicz	hou														2	0	0	0	0
Lamar Miller	MIA										14	175	1	85	3	3	61	1	54
Ryan Tannehill	MIA	18	19	282	4	0	4	41	54	158.3	1	3	0	3
Jarvis Landry	MIA										1	5	0	5	5	5	83	2	50
Rishard Matthews	MIA														3	3	75	1	53
Jonas Gray	MIA										12	48	0	16	1	1	10	0	10
Greg Jennings	MIA														2	2	37	0	23
Damien Williams	MIA										4	19	0	19	2	2	10	0	8	1	1
Jordan Cameron	MIA														2	2	23	0	12
Matt Moore	MIA	1	1	14	0	0	0	0	14	118.7	3	-2	0	0
Dion Sims	MIA														2	1	-3	0	-3