Knight Center D3 Data Visualization Course - Module 4 Exercise

<!--

MODULE 4 EXERCISE

Refine bar chart from last week's exercise. 
1. Use scales to set the bar positions and heights dynamically
2. Add axes
3. Adjust styling with CSS (bar colors, hover states, axis styles)
4. Add title and/or caption to provide context
5. Link to data source

LESSONS LEARNED
Debugging
Removing rows in CSV that have missing data

-->

<!doctype html>
<html lang="en">    
	<head>
	    <meta charset="utf-8">
	    <title>Module 4 Exercise - Scales and Axes</title>
	    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	    <style type="text/css">
	    	/* Adjust styling with CSS (bar colors, hover states, axis styles) */
	    	body {
	    		background-color: white;
	    		font-family: Helvetica, Arial, sans-serif; 
	    	}

h1 {
	    		font-size: 24px; 
	    		margin: 0;
	    	}

p {
	    		font-size: 14px; 
	    		margin: 10px 0 0 0;
	    	}

svg {
	    		background-color: white; 
	    	}

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

rect:hover {
	    		fill: rgba(4, 82, 156, 0.8);
	    	}

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

.axis text {
	    		font-family: sans-serif; 
	    		font-size: 13px;
    		}

.y.axis path, 
	    	.y.axis line {
	    		opacity: 0;
	    	}

</style>
	</head>
	<body>
		
		<h1>Golden State Warrior Players by PER<h1>
		<p>Data from 2014-2015 season from <a href="https://www.basketball-reference.com">Basketball-Reference</a>.</p>

// settings for SVG
			var w = 800; 
			var h = 600; 
			var padding = [30, 10, 30, 200]; // padding for top, right, bottom, left

var dataset; // declare global var to hold data

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

// setup scales: xScale for linear scale, yScale as ordinal
			var widthScale = d3.scale.linear()
								.range([0, w - padding[1] - padding[3]]);

var heightScale = d3.scale.ordinal()
								.rangeRoundBands([padding[0], h - padding[0] - padding[2]], 0.15);

// setup axes to be used later
			var xAxis = d3.svg.axis() 
							.scale(widthScale)
							.orient("bottom");

var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");

// console.log(widthScale.range(), heightScale.range());

// read in the data

d3.csv("goldenStateWarriors.csv", function(data) {

// verify that CSV has loaded
				console.log(data);

// make data accessible outside of callback
				dataset = data;

// sort the data in descending order by PER; use "+" to typecase the dat as a number instead of a string
				data.sort(function(a, b) {
					return d3.descending(+a.PER, +b.PER); 
				});

// Add input domains dynamically to xScale and yScale with min, max
				// widthScale.domain([
				// 	d3.min(data, function(d) {return d.PER;}), 
				// 	d3.max(data, function(d) {return d.PER;})
				// ]);
				widthScale.domain([0, d3.max(data, function(d) {return d.PER;})]); // set domain to [0, max] instead of [min, max]

heightScale.domain(data.map(function(d) {return d.Player;}));

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

// draw bar graph rectangles with the following visual properties
				rects.attr({
					x: padding[3],
					y: function(d) {return heightScale(d.Player);},
					width: function(d) {return widthScale(d.PER)},
					height: heightScale.rangeBand()  
				});

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

// draw x-axis with the following visual properties
				svg.append("g")
					.attr({
						class: "x axis", 	// add class to use in internal CSS styling above
						transform: "translate(" + padding[3] + "," + (h - padding[0] - padding[2]) + ")" // translate down to bottom of SVG using padding values
					})
					.call(xAxis); 			// draw xAxis

// draw x-axis with the following visual properties
				svg.append("g")
					.attr({
						class: "y axis", 	// assign class to use in internal CSS styling above
						transform: "translate(" + padding[3] + "," + 0 + ")" // translate to the R using padding values
					})
					.call(yAxis); 		// draw yAxis

});

</script>

</body>
</html>

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

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