j450h1/index.html

## readme.MD

      
    Raw
  

              readme.MD
            
          
    Data Visualization Project
*Summary
*Design
*Feedback
*Resources

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Comparing North American Major Sports Leagues by Revenue &amp; 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>

## mlb-on.png

      
    Raw
  

              mlb-on.png
            
          
## nba-on.png

      
    Raw
  

              nba-on.png
            
          
## nfl-on.png

      
    Raw
  

              nfl-on.png
            
          
## nhl-on.png

      
    Raw
  

              nhl-on.png
            
          
## tidy.csv

          
            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
	<!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>
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