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;
}

.graph {
    width: 80vw;
    height: 40vh;
    display: flex;
    align-content: center;
    margin: auto;
}

.ct-series-a .ct-bar {
    /* Colour of your bars */
    stroke: #008D97;
    /* The width of your bars */
    stroke-width: 4em;
}

.ct-series-b .ct-bar {
    /* Colour of your bars */
    stroke: #999;
    /* The width of your bars */
    stroke-width: 4em;
}


/* Use this selector to override the line style on a given series */

.ct-series-a .ct-line {
    /* Set the colour of this series line */
    stroke: #008D97;
    /* Control the thikness of your lines */
    stroke-width: 5px;
}


/* Use this selector to override the line style on a given series */

.ct-series-b .ct-line {
    /* Set the colour of this series line */
    stroke: #B31B34;
    /* Control the thikness of your lines */
    stroke-width: 5px;
}

.btn-group {
    display: flex;
    justify-content: center;
    margin: auto;
}

.btn {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin: auto;
    font-size: 14px;
    padding: 14px;
    cursor: pointer;
    border: none;
    color: white;
    background-color: #1696d2;
    display: block;
    line-height: 12px;
    text-transform: uppercase;
    text-align: center;
    float: none;
    margin: 5px;
}

.btn:hover {
    background-color: #000;
}

.clearfix:before,
.clearfix:after {
    content: ' ';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.hide {
    display: none;
}

.show {
    display: block;
}

## index.html
<!DOCTYPE html>
<!-- This was one of Scott Murray's Knight D3 course files, modified a bit. -->
<!-- This was copied from Lynn Cherny's class files and modified to load Josh's data. -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Loading CSV Data with D3</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>
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
    <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>
    <h1>Game Statistics</h1>
    <div class='btn-group clearfix'>
        <button id='buttonTwo' class='btn'>Show Two</button>
        <button id='buttonOne' class='btn selected'>Show One</button>
    </div>
    <div  id="chart-one" >
        <h2 >Miami Dolphins Offense</h2>
        <div id="miaoff" class="graph"></div>
        <p>This is Miami's offensive output in this game compared to its season averages. Aqua bars are game stats, gray bars are season averages.</p>
    </div>

    <div id="chart-two" >
        <h2>Chance to Win</h2>
        <div id="win" class="graph"></div>
        <p>This is each team's winning odds throuhout the game. Aqua represents Miami's winning odds, red represents Houston.</p>
    </div>
    <script>
        //Load in contents of CSV file
        var game_data = [];
        d3.csv("miahou_gamestats-wide.csv", function (data) {
            //Now CSV contents have been transformed into
            //an array of JSON objects.
            console.log("The first file is csv...")
                // Format number fields
            game_data.forEach(function (d) {
                d.pass_dyd = +d.pass_dyd;
                d.pass_dyd_avg = +d.pass_dyd_avg;
                d.pass_oyd = +d.pass_oyd;
                d.pass_oyd_avg = +d.pass_oyd_avg;
                d.pts_avg_allwd = +d.pts_avg_allwd;
                d.pts_avg_scored = +d.pts_avg_scored;
                d.rush_dyd = +d.rush_dyd;
                d.rush_dyd_avg = +d.rush_dyd_avg;
                d.rush_oyd = +d.rush_oyd;
                d.rush_oyd_avg = +d.rush_oyd_avg;
                d.score = +d.score;
                d.to_d = +d.to_d;
                d.to_d_avg = +d.to_d_avg;
                d.total_dyd = +d.total_dyd;
                d.total_dyd_avg = +d.total_dyd_avg;
                d.total_oyd = +d.total_oyd;
                d.total_oyd_avg = +d.total_oyd_avg;
            });

            new Chartist.Bar('#miaoff', {
                labels: ['Total', 'Pass', 'Run'],
                series: [
    [data[1].total_oyd, data[1].pass_oyd, data[1].rush_oyd],
    [data[1].total_oyd_avg, data[1].pass_oyd_avg, data[1].rush_oyd_avg]
  ]
            }, {
                seriesBarDistance: 85,
                axisX: {
                    showGrid: false
                }
            });


        });
        new Chartist.Line('#win', {
            labels: ['Start', 'Q1', 'Q2', 'Q3', 'End'],
            series: [
    [58.2, 98.8, 99.9, 99.9, 100],
    [41.8, 1.2, 0.1, 0.1, 0]
  ]
        }, {
            high: 100,
            low: 0,
            showArea: false,
            showLine: true,
            showPoint: false,
            fullWidth: true,
            axisX: {
                showGrid: false
            }
        });


    $(document).ready(function(){
    $("#buttonOne").click(function(){
        $("#chart-two").hide();
        $("#chart-one").show();
    });
    $("#buttonTwo").click(function(){
        $("#chart-two").show();
        $("#chart-one").hide();
    });

});

    </script>

</body>

</html>

## miahou_gamestats-wide.csv

          
            team
            score
            pts_avg_scored
            pts_avg_allwd
            total_oyd
            pass_oyd
            rush_oyd
            total_oyd_avg
            pass_oyd_avg
            rush_oyd_avg
            total_dyd
            pass_dyd
            rush_dyd
            to_d
            total_dyd_avg
            pass_dyd_avg
            rush_dyd_avg
            to_d_avg

            
              hou
              26
              21
              20
              322
              251
              71
              348
              240
              108
              503
              255
              248
              1
              310
              210
              100
              2

            
              mia
              44
              19
              24
              503
              255
              248
              332
              238
              94
              322
              251
              71
              1
              376
              250
              126
              2
	h1,
	h2 {
	font-family: 'Graduate', cursive;
	text-align: center;
	text-transform: uppercase;
	}

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

	.graph {
	width: 80vw;
	height: 40vh;
	display: flex;
	align-content: center;
	margin: auto;
	}

	.ct-series-a .ct-bar {
	/* Colour of your bars */
	stroke: #008D97;
	/* The width of your bars */
	stroke-width: 4em;
	}

	.ct-series-b .ct-bar {
	/* Colour of your bars */
	stroke: #999;
	/* The width of your bars */
	stroke-width: 4em;
	}


	/* Use this selector to override the line style on a given series */

	.ct-series-a .ct-line {
	/* Set the colour of this series line */
	stroke: #008D97;
	/* Control the thikness of your lines */
	stroke-width: 5px;
	}


	/* Use this selector to override the line style on a given series */

	.ct-series-b .ct-line {
	/* Set the colour of this series line */
	stroke: #B31B34;
	/* Control the thikness of your lines */
	stroke-width: 5px;
	}

	.btn-group {
	display: flex;
	justify-content: center;
	margin: auto;
	}

	.btn {
	display: flex;
	flex-direction: row;
	align-content: center;
	margin: auto;
	font-size: 14px;
	padding: 14px;
	cursor: pointer;
	border: none;
	color: white;
	background-color: #1696d2;
	display: block;
	line-height: 12px;
	text-transform: uppercase;
	text-align: center;
	float: none;
	margin: 5px;
	}

	.btn:hover {
	background-color: #000;
	}

	.clearfix:before,
	.clearfix:after {
	content: ' ';
	display: table;
	}

	.clearfix:after {
	clear: both;
	}

	.clearfix {
	*zoom: 1;
	}

	.hide {
	display: none;
	}

	.show {
	display: block;
	}
	<!DOCTYPE html>
	<!-- This was one of Scott Murray's Knight D3 course files, modified a bit. -->
	<!-- This was copied from Lynn Cherny's class files and modified to load Josh's data. -->
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Loading CSV Data with D3</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>
	<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
	<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
	<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>
	<h1>Game Statistics</h1>
	<div class='btn-group clearfix'>
	<button id='buttonTwo' class='btn'>Show Two</button>
	<button id='buttonOne' class='btn selected'>Show One</button>
	</div>
	<div id="chart-one" >
	<h2 >Miami Dolphins Offense</h2>
	<div id="miaoff" class="graph"></div>
	<p>This is Miami's offensive output in this game compared to its season averages. Aqua bars are game stats, gray bars are season averages.</p>
	</div>

	<div id="chart-two" >
	<h2>Chance to Win</h2>
	<div id="win" class="graph"></div>
	<p>This is each team's winning odds throuhout the game. Aqua represents Miami's winning odds, red represents Houston.</p>
	</div>
	<script>
	//Load in contents of CSV file
	var game_data = [];
	d3.csv("miahou_gamestats-wide.csv", function (data) {
	//Now CSV contents have been transformed into
	//an array of JSON objects.
	console.log("The first file is csv...")
	// Format number fields
	game_data.forEach(function (d) {
	d.pass_dyd = +d.pass_dyd;
	d.pass_dyd_avg = +d.pass_dyd_avg;
	d.pass_oyd = +d.pass_oyd;
	d.pass_oyd_avg = +d.pass_oyd_avg;
	d.pts_avg_allwd = +d.pts_avg_allwd;
	d.pts_avg_scored = +d.pts_avg_scored;
	d.rush_dyd = +d.rush_dyd;
	d.rush_dyd_avg = +d.rush_dyd_avg;
	d.rush_oyd = +d.rush_oyd;
	d.rush_oyd_avg = +d.rush_oyd_avg;
	d.score = +d.score;
	d.to_d = +d.to_d;
	d.to_d_avg = +d.to_d_avg;
	d.total_dyd = +d.total_dyd;
	d.total_dyd_avg = +d.total_dyd_avg;
	d.total_oyd = +d.total_oyd;
	d.total_oyd_avg = +d.total_oyd_avg;
	});

	new Chartist.Bar('#miaoff', {
	labels: ['Total', 'Pass', 'Run'],
	series: [
	[data[1].total_oyd, data[1].pass_oyd, data[1].rush_oyd],
	[data[1].total_oyd_avg, data[1].pass_oyd_avg, data[1].rush_oyd_avg]
	]
	}, {
	seriesBarDistance: 85,
	axisX: {
	showGrid: false
	}
	});


	});
	new Chartist.Line('#win', {
	labels: ['Start', 'Q1', 'Q2', 'Q3', 'End'],
	series: [
	[58.2, 98.8, 99.9, 99.9, 100],
	[41.8, 1.2, 0.1, 0.1, 0]
	]
	}, {
	high: 100,
	low: 0,
	showArea: false,
	showLine: true,
	showPoint: false,
	fullWidth: true,
	axisX: {
	showGrid: false
	}
	});


	$(document).ready(function(){
	$("#buttonOne").click(function(){
	$("#chart-two").hide();
	$("#chart-one").show();
	});
	$("#buttonTwo").click(function(){
	$("#chart-two").show();
	$("#chart-one").hide();
	});

	});

	</script>

	</body>

	</html>
team	score	pts_avg_scored	pts_avg_allwd	total_oyd	pass_oyd	rush_oyd	total_oyd_avg	pass_oyd_avg	rush_oyd_avg	total_dyd	pass_dyd	rush_dyd	to_d	total_dyd_avg	pass_dyd_avg	rush_dyd_avg	to_d_avg
hou	26	21	20	322	251	71	348	240	108	503	255	248	1	310	210	100	2
mia	44	19	24	503	255	248	332	238	94	322	251	71	1	376	250	126	2