Data Visualization Project
*Summary
*Design
*Feedback
*Resources
Last active
August 29, 2015 14:22
-
-
Save j450h1/d9c62059cd2c86d611c3 to your computer and use it in GitHub Desktop.
4 Major Sports Leagues in North America
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Comparing North American Major Sports Leagues by Revenue & Attendance</title> | |
| <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script> | |
| <script type="text/javascript"> | |
| function draw(data,filter_year) { | |
| var chartdata = dimple.filterData(data, "Year", filter_year); | |
| //var chartdata = data; | |
| /* | |
| D3.js setup code | |
| */ | |
| "use strict"; | |
| var margin = 75, | |
| width = 1400 - margin, | |
| height = 600 - margin; | |
| var svg = d3.select("body") | |
| .append("h1") | |
| .text(filter_year) | |
| .attr("align","center") | |
| .append("p") | |
| .text("Annual Attendance vs Annual Revenue for Major Sports Leagues") | |
| .attr("align","center") | |
| .append("svg") | |
| .attr("width", width + margin) | |
| .attr("height", height + margin) | |
| .append('g') | |
| .attr('class','chart'); | |
| /* | |
| Dimple.js Chart construction code | |
| */ | |
| var myChart = new dimple.chart(svg, chartdata); | |
| myChart.addMeasureAxis("x", "Revenue"); | |
| myChart.addMeasureAxis("y", "Attendance"); | |
| myChart.addSeries("League", dimple.plot.bubble); | |
| //myChart.addLegend(60, 10, 510, 20, "right"); | |
| myChart.ease = "bounce"; | |
| myChart.staggerDraw = true; | |
| myChart.draw(1000); | |
| //svg.exit().remove(); | |
| //myChart.exit().remove(); | |
| //svg.selectAll("*").remove(); | |
| }; | |
| </script> | |
| <style type="text/css"> | |
| .customFont { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400;} | |
| .div_NHL { background-color: #c2e487; float:left; margin-right: 10px;} | |
| .div_NBA { background-color: #ebb980; float:left; margin-right: 10px;} | |
| .div_MLB { background-color: #ebbbb5; float:left; margin-right: 10px;} | |
| .div_NFL { background-color: #95b8d1; float:left; margin-right: 10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="div_NHL"><p> </p><img src="nhl-on.png" alt="NHL" align="middle"><p> </p></div> | |
| <div class="div_NBA"><p> </p><img src="nba-on.png" alt="NBA" align="middle"><p> </p></div> | |
| <div class="div_MLB"><p> </p><img src="mlb-on.png" alt="MLB" align="middle"><p> </p></div> | |
| <div class="div_NFL"><p> </p><img src="nfl-on.png" alt="NFL" align="middle"><p> </p></div> | |
| <div> | |
| <script type="text/javascript"> | |
| //var view_year = "2006"; | |
| var years = ["2006","2007","2008","2009","2010","2011"]; | |
| /* | |
| Use D3 (not dimple.js) to load the CSV file | |
| and pass the contents of it to the draw function | |
| */ | |
| d3.csv("tidy.csv", function(d) { | |
| return { | |
| Year: d.Year, // convert "Year" column to Date | |
| League: d.League, | |
| Attendance: +d.Attendance, // convert "Length" column to number | |
| Revenue: +d.Revenue | |
| }; | |
| }, | |
| function(dataset){ | |
| var i = 0; | |
| var year_interval = setInterval(function() { | |
| draw(dataset,years[i]); | |
| i++; | |
| if(i > years.length) { | |
| clearInterval(year_interval); | |
| } | |
| },1000); //Animation changes after 1 second | |
| }); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| Year | League | Attendance | Revenue | |
|---|---|---|---|---|
| 2006 | NFL | 17.6 | 6539 | |
| 2006 | NHL | 20.9 | 2267 | |
| 2006 | NBA | 21.6 | 3367 | |
| 2006 | MLB | 76.3 | 5111 | |
| 2007 | NFL | 17.6 | 7090 | |
| 2007 | NHL | 20.9 | 2436 | |
| 2007 | NBA | 21.8 | 3573 | |
| 2007 | MLB | 79.6 | 5489 | |
| 2008 | NFL | 17.5 | 7575 | |
| 2008 | NHL | 21.3 | 2747 | |
| 2008 | NBA | 21.4 | 3768 | |
| 2008 | MLB | 79 | 5819 | |
| 2009 | NFL | 17.3 | 8016 | |
| 2009 | NBA | 21.5 | 3786 | |
| 2009 | NHL | 21.5 | 2819 | |
| 2009 | MLB | 73.6 | 5898 | |
| 2010 | NFL | 17.1 | 8345 | |
| 2010 | NHL | 21 | 2929 | |
| 2010 | NBA | 21.1 | 3805 | |
| 2010 | MLB | 73.2 | 6137 | |
| 2011 | NFL | 17.2 | 8867 | |
| 2011 | NHL | 21.1 | 3090 | |
| 2011 | NBA | 21.3 | 3960 | |
| 2011 | MLB | 73.7 | 6464 |
Author
Author
Make format corrections
Author
Update code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Upload csv file