Created
February 7, 2016 18:37
-
-
Save CafeConVega/2a7076c90d384c13a17e to your computer and use it in GitHub Desktop.
Week4: Starter Bars
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| .HOU{ | |
| fill: #B31B34; | |
| } | |
| .MIA{ | |
| fill: #008D97; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <div id="table_rec" class="table"></div> | |
| <script> | |
| var width = "80%"; | |
| var height = "70%"; | |
| // Set up the range here - my output sizes for my bars - from 0 to width. | |
| var widthScale = d3.scale.linear() | |
| .range([ 0, width ]); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| //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; | |
| // set up the domain here, from the data i read in. I'm starting at 0, not min. | |
| widthScale.domain([ 0, d3.max(data, function(d) { | |
| return +d.rec_rec; | |
| }) ]); | |
| var rects = svg.selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect"); | |
| rects.attr("x", 0) | |
| .attr("y", function(d, i) { | |
| // this is a hack to space the bars - we can do it was axes later. | |
| return i * 20; // just spacing the bars - notice from the top! | |
| }) | |
| .attr("width", function(d) { | |
| return widthScale(+d.rec_rec); // use your scale here: | |
| }) | |
| .attr("height", 10) | |
| .attr("class", function (d) {return d.team}) | |
| .append("title") // this is a simple (bad) tooltip | |
| .text(function(d) { | |
| return "("+d.team+") "+d.player +"'s receptions: " + d.rec_rec; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment