surabhishankar/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Surbhi Shankar
01012632
I have used two different datasets to represent two graphs (data.csv and football.csv).
The data that I selected was huge and hence I have considered only required data.
Demonstration of channel types and channels:
Graph 1 -
This is a scatterplot which represents the football data. This is a plot of Passing rate against Pass Completions. This graph clearly shows points on the X-Y graph with the corresponding values. Different colors are used to distinguish between Conferences. Hence, this graph demonstrates magnitude as position and identity as color hue. Also, we have given different sizes to the bubbles in the scatterplot depending on the values of passing completions. This demonstrates magnitude as area.
It is easy for us to know which conference has the highest number of pass completions and also what passing rate does it hold.
Graph 2 -
This is a grouped bar graph which represents data about selected states and their population record varying on a range of years from 2010 to 2011. Here the data about each state is grouped and hence it is a demonstration of identity as spatial region. Also, there has been use of colors which demonstrate identity as color hue.
Following are the graphs generated using tableau.
[note: colors here may be different from D3 reprsentation.]
![R image] (http://s2.postimg.org/mttl992k9/Graph_1.png "R image")
![R image] (http://s11.postimg.org/493qult03/Graph_2.png "R image")
Sources for datasets:
http://www.sports-reference.com/cfb/years/2014-passing.html
http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=PEP_2015_PEPANNRES&prodType=table
References:
http://bl.ocks.org/weiglemc/bdc0474429e6567bc320
http://bl.ocks.org/enjalot/raw/211bd42857358a60a936/
http://blockbuilder.org/
https://bost.ocks.org/mike/

  
## data.csv

          
            State
            census_2010
            census_2011
            census_2012
            census_2013
            census_2014
            census_2015

            
              California
              37334079
              37700034
              38056055
              38414128
              38792291
              39144818

            
              New York
              19402920
              19523202
              19606981
              19691032
              19748858
              19795791

            
              Florida
              18849890
              19105533
              19352021
              19594467
              19905569
              20271272

            
              Illinois
              12841249
              12861882
              12875167
              12889580
              12882189
              12859995

            
              New Jersey
              8803881
              8842934
              8874893
              8907384
              8938844
              8958013

            
              Virginia
              8025787
              8110783
              8193374
              8267875
              8328098
              8382993

            
              Maryland
              5788409
              5844171
              5890740
              5936040
              5975346
              6006401

            
              Hawaii
              1363980
              1378227
              1392641
              1408765
              1420257
              1431603

## football.csv

          
            Rk
            Player
            School
            Conf
            Passcompletions
            PassingRate

            
              1
              Marcus Mariota
              Oregon
              Pac-12
              304
              181.7

            
              2
              Garrett Grayson
              Colorado State
              MWC
              270
              166.2

            
              3
              Zach Terrell
              Western Michigan
              MAC
              250
              164.4

            
              4
              Bryce Petty
              Baylor
              Big 12
              270
              157.8

            
              5
              J.T. Barrett
              Ohio State
              Big Ten
              203
              169.8

            
              6
              Grant Hedrick
              Boise State
              MWC
              294
              157.2

            
              7
              Blake Sims
              Alabama
              SEC
              252
              157.9

            
              8
              Brandon Doughty
              Western Kentucky
              CUSA
              375
              167.1

            
              9
              Jake Waters
              Kansas State
              Big 12
              262
              154.8

            
              10
              Connor Cook
              Michigan State
              Big Ten
              212
              149.4

            
              11
              Rakeem Cato
              Marshall
              CUSA
              267
              155.4

            
              12
              Dak Prescott
              Mississippi State
              SEC
              244
              151.7

            
              13
              Gary Nova
              Rutgers
              Big Ten
              187
              145.3

            
              14
              Driphus Jackson
              Rice
              CUSA
              191
              148.9

            
              15
              Nick Marshall
              Auburn
              SEC
              178
              151.1

            
              16
              Cody Kessler
              Southern California
              Pac-12
              315
              167.1

            
              17
              Brad Kaaya
              Miami (FL)
              ACC
              221
              145.9

            
              18
              Jameis Winston
              Florida State
              ACC
              305
              145.5

            
              19
              Bo Wallace
              Mississippi
              SEC
              229
              142.2

            
              20
              Patrick Mahomes
              Texas Tech
              Big 12
              105
              151.2

## index.html
<!DOCTYPE html>
<html>
<body>

<iframe src="index1.html" width="1200" height="550">
</iframe>

<p> Graph 1 </p>

<iframe src="index2.html" width="1200" height="550">
</iframe>

<p> Graph 2 </p>
</body>
</html>

## index1.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<!-- Example based on http://bl.ocks.org/weiglemc/bdc0474429e6567bc320 -->


<style>
body {
  font: 11px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<script>
var margin = {top: 25, right: 50, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// Create x
var xVal = function(d) { return d["PassingRate"];},
    xScale = d3.scale.linear().range([0, width]),
    xMap = function(d) { return xScale(xVal(d));},
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// Create y
var yVal = function(d) { return d["Passcompletions"];},
    yScale = d3.scale.linear().range([height, 0]),
    yMap = function(d) { return yScale(yVal(d));},
    yAxis = d3.svg.axis().scale(yScale).orient("left");

var cVal = function(d) { return d.Conf;},
    color = d3.scale.category10();


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


// load data in .csv format
d3.csv("football.csv", function(error, data) {


  data.forEach(function(d) {
    d["Passcompletions"] = +d["Passcompletions"];
    d["PassingRate"] = +d["PassingRate"];

  });


  xScale.domain([d3.min(data, xVal)-2, d3.max(data, xVal)+2]);
  yScale.domain([d3.min(data, yVal)-5, d3.max(data, yVal)+5]);
var rScale = d3.scale.linear()
								 .domain([0, d3.max(data, function(d) { return yVal(d); })])
								 .range([1, 10]);

  // define x axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Passing Rate");

  // define y axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", -40)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Pass Completions");


  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {return rScale(yVal(d))})
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cVal(d));})

  // legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(10," + (i+7) * 20 + ")"; });

  // legend colored rectangles
  legend.append("rect")
      .attr("x", width - 20)
      .attr("width", 20)
      .attr("height", 20)
      .style("fill", color);

  // legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".30em")
      .style("text-anchor", "end")
      .text(function(d) { return d;})
});

</script>
</body>
</html>

## index2.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: blue;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#4e548c", "#a09281", "#6e8590", "#835783", "#d88b5e", "#ffe970"]);


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


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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

d3.csv("data.csv", function(error, data) {
  var years = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

  data.forEach(function(d) {
    d.year = years.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.State; }));
  x1.domain(years).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.year, function(d) { return d.value; }); })]);

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


  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -40)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Population");

  var state = svg.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

  state.selectAll("rect")
      .data(function(d) { return d.year; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(years.slice())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 21 + ")"; });

  legend.append("rect")
      .attr("x", width - 20)
      .attr("width", 20)
      .attr("height", 20)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 25)
      .attr("y", 10)
      .attr("dy", ".40em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>
</body>
</html>
State	census_2010	census_2011	census_2012	census_2013	census_2014	census_2015
California	37334079	37700034	38056055	38414128	38792291	39144818
New York	19402920	19523202	19606981	19691032	19748858	19795791
Florida	18849890	19105533	19352021	19594467	19905569	20271272
Illinois	12841249	12861882	12875167	12889580	12882189	12859995
New Jersey	8803881	8842934	8874893	8907384	8938844	8958013
Virginia	8025787	8110783	8193374	8267875	8328098	8382993
Maryland	5788409	5844171	5890740	5936040	5975346	6006401
Hawaii	1363980	1378227	1392641	1408765	1420257	1431603
Rk	Player	School	Conf	Passcompletions	PassingRate
1	Marcus Mariota	Oregon	Pac-12	304	181.7
2	Garrett Grayson	Colorado State	MWC	270	166.2
3	Zach Terrell	Western Michigan	MAC	250	164.4
4	Bryce Petty	Baylor	Big 12	270	157.8
5	J.T. Barrett	Ohio State	Big Ten	203	169.8
6	Grant Hedrick	Boise State	MWC	294	157.2
7	Blake Sims	Alabama	SEC	252	157.9
8	Brandon Doughty	Western Kentucky	CUSA	375	167.1
9	Jake Waters	Kansas State	Big 12	262	154.8
10	Connor Cook	Michigan State	Big Ten	212	149.4
11	Rakeem Cato	Marshall	CUSA	267	155.4
12	Dak Prescott	Mississippi State	SEC	244	151.7
13	Gary Nova	Rutgers	Big Ten	187	145.3
14	Driphus Jackson	Rice	CUSA	191	148.9
15	Nick Marshall	Auburn	SEC	178	151.1
16	Cody Kessler	Southern California	Pac-12	315	167.1
17	Brad Kaaya	Miami (FL)	ACC	221	145.9
18	Jameis Winston	Florida State	ACC	305	145.5
19	Bo Wallace	Mississippi	SEC	229	142.2
20	Patrick Mahomes	Texas Tech	Big 12	105	151.2
	<!DOCTYPE html>
	<html>
	<body>

	<iframe src="index1.html" width="1200" height="550">
	</iframe>

	<p> Graph 1 </p>

	<iframe src="index2.html" width="1200" height="550">
	</iframe>

	<p> Graph 2 </p>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">

	<!-- Example based on http://bl.ocks.org/weiglemc/bdc0474429e6567bc320 -->


	<style>
	body {
	font: 11px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot {
	stroke: #000;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<script>
	var margin = {top: 25, right: 50, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;


	// Create x
	var xVal = function(d) { return d["PassingRate"];},
	xScale = d3.scale.linear().range([0, width]),
	xMap = function(d) { return xScale(xVal(d));},
	xAxis = d3.svg.axis().scale(xScale).orient("bottom");

	// Create y
	var yVal = function(d) { return d["Passcompletions"];},
	yScale = d3.scale.linear().range([height, 0]),
	yMap = function(d) { return yScale(yVal(d));},
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	var cVal = function(d) { return d.Conf;},
	color = d3.scale.category10();


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


	// load data in .csv format
	d3.csv("football.csv", function(error, data) {


	data.forEach(function(d) {
	d["Passcompletions"] = +d["Passcompletions"];
	d["PassingRate"] = +d["PassingRate"];

	});


	xScale.domain([d3.min(data, xVal)-2, d3.max(data, xVal)+2]);
	yScale.domain([d3.min(data, yVal)-5, d3.max(data, yVal)+5]);
	var rScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d) { return yVal(d); })])
	.range([1, 10]);

	// define x axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Passing Rate");

	// define y axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", -40)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Pass Completions");


	svg.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", function(d) {return rScale(yVal(d))})
	.attr("cx", xMap)
	.attr("cy", yMap)
	.style("fill", function(d) { return color(cVal(d));})

	// legend
	var legend = svg.selectAll(".legend")
	.data(color.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(10," + (i+7) * 20 + ")"; });

	// legend colored rectangles
	legend.append("rect")
	.attr("x", width - 20)
	.attr("width", 20)
	.attr("height", 20)
	.style("fill", color);

	// legend text
	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".30em")
	.style("text-anchor", "end")
	.text(function(d) { return d;})
	});

	</script>
	</body>
	</html>