Data Visualization and Infographics with D3 - Module 3

<!doctype html>
<html lang="en">    
	<head>
	    <meta charset="utf-8">
	    <title>Exercise 3</title>
	    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	    <style type="text/css">
	    	body {
	    		background-color: #AED7FF; 
	    	}
	    	svg {
	    		background-color: #AED7FF;
	    	}

rect {
	    		fill: 	#04529C;
	    		stroke: #04529C;
	    	}

/* Add transparent hover interactivity */
	    	rect:hover { 
	    		fill: rgba(4, 82, 156, 0.8);
	    	}
	    </style>
	</head>
	<body>
		<h2>Golden State Warriors Players by PER</h2>

var w = 800; 
			var h = 600;
			var barSpacing = 25;
			var barHeight = barSpacing - 5; 		// set the height of the bar in relation to space between bars
			var dataset;

// set reference to svg
			var svg = d3.select("body")
						.append("svg")
						.attr({
							width: w, 
							height: h
						});

// load CSV file
			d3.csv("goldenStateWarriors.csv", function(data) {

// CSV has been loaded and transformed into array of JSON objects
				// Logging the data to the console for verification
				console.log(data);

// to use data outside of function
				var dataset = data;

// sort dataset in descending order by PER
				data.sort(function(a,b) {
					return d3.descending(a.PER, b.PER);
				});

// save reference to all rectangles
				var rects = svg.selectAll("rect")
							.data(data)
							.enter()
							.append("rect");

// iterate through array of rectangles and set attributes to rectangles
				rects.attr({
					x: 0, 
					y: function(d,i) {return i * barSpacing;},
					width: function(d) {return d.PER * 30;},
					height: barHeight,
					// fill: "#04529C",
					// create gradient fill as a function of the datum (PER)
					// fill: function(d) {return "rgb(4, 82, " + d + ")";},
					// stroke: "#04529C"
				});

// append title to add tooltip interactivity
				rects.append('title')					
					.text(function(d) {
						return d.Player + "'s PER is " + d.PER;
				});

// // store reference to all labels
				// var labels = svg.selectAll("text")
				// 	.data(data)
				// 	.enter()
				// 	.append("text");

// labels.text(function(d) {return d;})
				// 	.attr({
				// 		x: function(d,i) {return d.PER * 30;},
				// 		y: function(d,i) {return i * barSpacing;}
				// 	});

});

</script>

</body>
</html>

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

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