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;
    cursor: pointer;
}

thead tr:hover {
    cursor: grab;
}

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

svg {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.tick,
.xlabel {
    font-family: 'Roboto', sans-serif;
    fill: grey;
}

.domain {
    display: none;
}

.HOU {
    fill: #B31B34;
    stroke: #B31B34;
    stroke-width: 3px;
}

.MIA {
    fill: #008D97;
    stroke: #008D97;
    stroke-width: 3px;
}

rect:hover {
    fill: white;
}

## 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 - Receptions</h2>
    <p>This is a bar chart of receptions made by player. Red bars are Houston pass catchers, aqua bars are Miami pass cathers. Hover over each bar for additional information.</p>
    <script type="text/javascript">
        var fullwidth = 900;
        var fullheight = 600;

        var margin = {
            top: 20,
            left: 200,
            right: 50,
            bottom: 50
        };

        var height = fullheight - margin.top - margin.bottom;
        var width = fullwidth - margin.left - margin.right;

        var widthScale = d3.scale.linear()
            .range([0, width]);

        var heightScale = d3.scale.ordinal()
            .rangeRoundBands([0, height], 0.2);

        var xAxis = d3.svg.axis()
            .scale(widthScale)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(heightScale)
            .orient("left")
            .innerTickSize([0]);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", fullwidth)
            .attr("height", fullheight)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //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.
            }

            // Format number fields
            data.forEach(function (d) {
                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.rec_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;

                widthScale.domain([0, d3.max(data, function (d) {
                    return +d.rec_rec;
                }) + 2]);
                heightScale.domain(data.map(function (d) {
                    return d.player;
                }));

                var rect_g = svg.selectAll("g")
                    .data(data)
                    .enter()
                    .append("g");


                var rects = rect_g.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect");

                rects.attr("x", 0)
                    .attr("y", function (d, i) {
                        return heightScale(d.player);
                    })
                    .attr("width", function (d) {
                        return widthScale(+d.rec_rec);
                    })
                    .attr("height", heightScale.rangeBand())
                    .attr("class", function (d) {
                        return d.team
                    })
                    .append("title")
                    .text(function (d) {
                        return "(" + d.team + ") " + d.player + "'s receptions: " + d.rec_rec;
                    });

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);

                svg.append("text")
                    .attr("class", "xlabel")
                    .attr("transform", "translate(" + width / 2 + " ," +
                        height + ")")
                    .style("text-anchor", "middle")
                    .attr("dy", "45")
                    .text("Receptions");

                rect_g.append("text")
                    .attr("x", function (d) {
                        return widthScale(d.rec_rec);
                    })
                    .attr("y", function (d, i) {
                        return heightScale(d.player);
                    })
                    .attr("dy", "1.5em")
                    .attr("dx", "1.2em")
                    .style("font-size", "14")
                    .text(function (d) {
                        return d.rec_rec;
                    });

            });
        });
    </script>


</body>

</html>

## mia-hou_off_individual_stats.csv

          
            player
            team
            position
            rec_target
            rec_rec
            rec_yards
            rec_td
            rec_long
            fmb
            fmb_lost

            
              Nate Washington
              HOU
              WR
              16
              9
              127
              2
              27

            
              DeAndre Hopkins
              HOU
              WR
              12
              6
              50
              0
              11
              1
              0

            
              Arian Foster
              HOU
              RB
              7
              5
              66
              1
              26

            
              Jarvis Landry
              MIA
              WR
              5
              5
              83
              2
              50

            
              Lamar Miller
              MIA
              RB
              3
              3
              61
              1
              54

            
              Rishard Matthews
              MIA
              WR
              3
              3
              75
              1
              53

            
              Chris Polk
              HOU
              RB
              3
              2
              14
              0
              8

            
              Greg Jennings
              MIA
              WR
              2
              2
              37
              0
              23

            
              Damien Williams
              MIA
              RB
              2
              2
              10
              0
              8
              1
              1

            
              Jordan Cameron
              MIA
              TE
              2
              2
              23
              0
              12

            
              Keith Mumphery
              HOU
              WR
              3
              1
              16
              0
              16

            
              Jonas Gray
              MIA
              RB
              1
              1
              10
              0
              10

            
              Dion Sims
              MIA
              TE
              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;
	cursor: pointer;
	}

	thead tr:hover {
	cursor: grab;
	}

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

	svg {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	}

	.tick,
	.xlabel {
	font-family: 'Roboto', sans-serif;
	fill: grey;
	}

	.domain {
	display: none;
	}

	.HOU {
	fill: #B31B34;
	stroke: #B31B34;
	stroke-width: 3px;
	}

	.MIA {
	fill: #008D97;
	stroke: #008D97;
	stroke-width: 3px;
	}

	rect:hover {
	fill: white;
	}
	<!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 - Receptions</h2>
	<p>This is a bar chart of receptions made by player. Red bars are Houston pass catchers, aqua bars are Miami pass cathers. Hover over each bar for additional information.</p>
	<script type="text/javascript">
	var fullwidth = 900;
	var fullheight = 600;

	var margin = {
	top: 20,
	left: 200,
	right: 50,
	bottom: 50
	};

	var height = fullheight - margin.top - margin.bottom;
	var width = fullwidth - margin.left - margin.right;

	var widthScale = d3.scale.linear()
	.range([0, width]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([0, height], 0.2);

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left")
	.innerTickSize([0]);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	//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.
	}

	// Format number fields
	data.forEach(function (d) {
	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.rec_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;

	widthScale.domain([0, d3.max(data, function (d) {
	return +d.rec_rec;
	}) + 2]);
	heightScale.domain(data.map(function (d) {
	return d.player;
	}));

	var rect_g = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g");


	var rects = rect_g.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", 0)
	.attr("y", function (d, i) {
	return heightScale(d.player);
	})
	.attr("width", function (d) {
	return widthScale(+d.rec_rec);
	})
	.attr("height", heightScale.rangeBand())
	.attr("class", function (d) {
	return d.team
	})
	.append("title")
	.text(function (d) {
	return "(" + d.team + ") " + d.player + "'s receptions: " + d.rec_rec;
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	svg.append("text")
	.attr("class", "xlabel")
	.attr("transform", "translate(" + width / 2 + " ," +
	height + ")")
	.style("text-anchor", "middle")
	.attr("dy", "45")
	.text("Receptions");

	rect_g.append("text")
	.attr("x", function (d) {
	return widthScale(d.rec_rec);
	})
	.attr("y", function (d, i) {
	return heightScale(d.player);
	})
	.attr("dy", "1.5em")
	.attr("dx", "1.2em")
	.style("font-size", "14")
	.text(function (d) {
	return d.rec_rec;
	});

	});
	});
	</script>


	</body>

	</html>
player	team	position	rec_target	rec_rec	rec_yards	rec_td	rec_long	fmb	fmb_lost
Nate Washington	HOU	WR	16	9	127	2	27
DeAndre Hopkins	HOU	WR	12	6	50	0	11	1	0
Arian Foster	HOU	RB	7	5	66	1	26
Jarvis Landry	MIA	WR	5	5	83	2	50
Lamar Miller	MIA	RB	3	3	61	1	54
Rishard Matthews	MIA	WR	3	3	75	1	53
Chris Polk	HOU	RB	3	2	14	0	8
Greg Jennings	MIA	WR	2	2	37	0	23
Damien Williams	MIA	RB	2	2	10	0	8	1	1
Jordan Cameron	MIA	TE	2	2	23	0	12
Keith Mumphery	HOU	WR	3	1	16	0	16
Jonas Gray	MIA	RB	1	1	10	0	10
Dion Sims	MIA	TE	2	1	-3	0	-3