07_workshop_horizontal bar chart solved

forked from mostaphaRoudsari's block: 07_workshop_horizontal bar chart solved

<!DOCTYPE html>

<head>
	<title>d3js workshop - bar chart</title>
	<script src="https://d3js.org/d3.v3.js"></script> 
</head>

<body>

// 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;

// 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
		
		var color = d3.scale.linear()
			.range(["blue", "red"]); // set the color range
		
		// 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;
				d.W = +d.W;
			});

// 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;})]);
			
			color.domain([d3.min(data, function(d){ return d.W;}), d3.max(data, function(d){ return d.W;})]); // set the domain based on number of wins

// 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 - 1) // 1 is the padding value so the bars don't touch each other
      			.style("fill", function(d){return color(d.W);});

// let's add the text and celeberate the almost end of this example
      		bar.append("text")
      			.attr("x", function(d) { return x(d.PTS) - 3; }) // 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;});

// add title to bars - browser will take care of tooltip
      		bar.append("title").text(function(d) { return d.Team;});

});

</script>
</body>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js