mostaphaRoudsari · July 17, 2017 13:03
diff --git a/.block b/.block
 license: mit
diff --git a/2015.02.21.PremierLeagueTable.csv b/2015.02.21.PremierLeagueTable.csv
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <head>
 	<title>d3js workshop - bar chart</title>
 	<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
 </head>

 <body>

 	<script type="text/javascript">
 		// this is a modified version of Mike's example here: http://bost.ocks.org/mike/bar/2/

 		// for this example we will draw rectangles for each bar
 		// the length of the bar chart will be number of points for each team and we will add a button to change it to wins

 		// we will learn about axes and scales and will review what we have learned so far

 		// initial variables
 		var dataPath = "2015.02.21.PremierLeagueTable.csv",
 			width = 420,
 			barHeight = 20,
 			padding = 1;

 		// this is a linear scale for x
 		var x = d3.scale.linear()
    		.range([0, width]); // set the range between 0 and width of the graph
 		
 		// read data using d3.csv
 		d3.csv(dataPath, function(data){

 			// let's see the data first
 			// console.log(data);

 			// coerce values to numbers
 			// this is javascript - has nothing to do with d3
 			data.map(function(d){d.PTS = +d.PTS;});

 			// before we want to draw the rectangles we need to set the domain for the scale
 			// so we can use the scale to generate the width of each bar
 			// we want the length to be based on the points of each team so I return d.PTS
 			// to set the maximum value
 			x.domain([0, d3.max(data, function(d){ return d.PTS;})]);

 			// now that the scale is ready let's add an svg first and set it's height and width
 			// Note: chart in this case is an svg! naming in d3 examples can be really confusing
 			// so make sure to name your object carefully
 			var chart = d3.select('body')
 				.append('svg')
 				.attr('width', width)
 				.attr('height', data.length * barHeight); // set height based on length of data

 			// start drawing the bar chart
 			// here bar will be list of groups which will include the rectangle and the text!
 			// and I didn't name it bars - this is the common practice in d3js world so you better get used to it
  			
  			var bar = chart.selectAll("g")
      			.data(data)
    			.enter().append("g")
      				.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); // move each bar to it's position
 			
      		// append a rectangle to each group
      		// note that since the group is already positioned you don't need to move the rectangles
      		
      		bar.append("rect")
      			.attr("width", function(d) { return x(d.PTS); }) // here we are using the scale that we created up there
      			.attr("height", barHeight - padding); // 1 is the padding value so the bars don't touch each other

      		// let's add the text and celeberate the almost end of this example
      		
      		bar.append("text")
      			.attr("x", function(d) { return x(d.PTS) - 20; }) // move the text to the end of the chart
      			.attr("y", barHeight / 2) // and move the insertion point to the center of the bar
      			.attr("dy", ".35em")
      				.text(function(d) { return d.PTS; });
 			

      		// well! can you see the text? try d3.selectAll('text') to see if they are created
      		
          // try to color the rectangles based on number of number of wins (d.W)
      		
          // you need to create a color scale and then use it to color the rectangles - similar to current approach for width
      		
      		// finally try to add a tooltip to show the name of the team once you hover the mouse on top of each bar
 		});


 	</script>
 </body>
Team	GP	W	D	L	GF	GA	GD	PTS
Chelsea	26	18	6	2	56	22	34	60
Man_City	26	16	7	3	56	25	31	55
Arsenal	26	14	6	6	49	29	20	48
Man_United	26	13	8	5	44	26	18	47
Southampton	25	14	4	7	38	17	21	46
Tottenham	25	13	4	8	39	34	5	43
Liverpool	25	12	6	7	36	29	7	42
West_Ham	25	10	8	7	36	28	8	38
Swansea_City	26	10	7	9	30	34	-4	37
Stoke_City	26	10	6	10	30	34	-4	36
	<!DOCTYPE html>

	<head>
	<title>d3js workshop - bar chart</title>
	<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
	</head>

	<body>

	<script type="text/javascript">
	// this is a modified version of Mike's example here: http://bost.ocks.org/mike/bar/2/

	// for this example we will draw rectangles for each bar
	// the length of the bar chart will be number of points for each team and we will add a button to change it to wins

	// we will learn about axes and scales and will review what we have learned so far

	// initial variables
	var dataPath = "2015.02.21.PremierLeagueTable.csv",
	width = 420,
	barHeight = 20,
	padding = 1;

	// this is a linear scale for x
	var x = d3.scale.linear()
	.range([0, width]); // set the range between 0 and width of the graph

	// read data using d3.csv
	d3.csv(dataPath, function(data){

	// let's see the data first
	// console.log(data);

	// coerce values to numbers
	// this is javascript - has nothing to do with d3
	data.map(function(d){d.PTS = +d.PTS;});

	// before we want to draw the rectangles we need to set the domain for the scale
	// so we can use the scale to generate the width of each bar
	// we want the length to be based on the points of each team so I return d.PTS
	// to set the maximum value
	x.domain([0, d3.max(data, function(d){ return d.PTS;})]);

	// now that the scale is ready let's add an svg first and set it's height and width
	// Note: chart in this case is an svg! naming in d3 examples can be really confusing
	// so make sure to name your object carefully
	var chart = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', data.length * barHeight); // set height based on length of data

	// start drawing the bar chart
	// here bar will be list of groups which will include the rectangle and the text!
	// and I didn't name it bars - this is the common practice in d3js world so you better get used to it

	var bar = chart.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); // move each bar to it's position

	// append a rectangle to each group
	// note that since the group is already positioned you don't need to move the rectangles

	bar.append("rect")
	.attr("width", function(d) { return x(d.PTS); }) // here we are using the scale that we created up there
	.attr("height", barHeight - padding); // 1 is the padding value so the bars don't touch each other

	// let's add the text and celeberate the almost end of this example

	bar.append("text")
	.attr("x", function(d) { return x(d.PTS) - 20; }) // move the text to the end of the chart
	.attr("y", barHeight / 2) // and move the insertion point to the center of the bar
	.attr("dy", ".35em")
	.text(function(d) { return d.PTS; });


	// well! can you see the text? try d3.selectAll('text') to see if they are created

	// try to color the rectangles based on number of number of wins (d.W)

	// you need to create a color scale and then use it to color the rectangles - similar to current approach for width

	// finally try to add a tooltip to show the name of the team once you hover the mouse on top of each bar
	});


	</script>
	</body>