All examples By author By category About

PH13

Full window Github gist

Peter's D3

forked from PH13's block: Peter's D3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Wizards PTS</title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

* {
			margin: 0;
			padding: 0;
		}

body {
			font-family: Helvetica, Arial, sans-serif;
			background-color: #eee;
		}

#container {
			width: 1200px;
			margin: 15px auto 15px auto;
			padding: 20px 20px 20px 20px;
			background-color: white;
			box-shadow: 0 0 20px #ccc;
		}

h1 {
			margin-bottom: 25px;
			font-size: 24px;
		}

h2 {
			margin-top: 30px;
			font-size: 17px;
		}

p {
			margin-bottom: 25px;
			font-size: 14px;
			line-height: 18px;
		}

.chartContainer {
			display: inline-block;
			width: 49%;
		}

#buttonContainer {
			margin-bottom: 10px;
		}

#buttonContainer2 {
			margin-bottom: 10px;
		}

button {
			padding: 5px;
		}

#footer p {
			margin-top: 50px;
			margin-bottom: 0;
			text-align: right;
			font-size: 10px;
			color: gray;
		}

svg {
			background-color: rgb(180,0,0);
		}
		
				g.bar {
			cursor: pointer;
		}

g.bar.highlight text {
			opacity: 1;
		}

g.bar.highlight rect {
/*			fill: SteelBlue;*/
			stroke: gold;
			stroke-width: 3px;
		}

.axis text {
			font-family: sans-serif;
			font-size: 11px;
			fill: white;
		}

}*/
	.axis {
	  font: 10px sans-serif;
	}

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

#tooltip {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			margin: 0;
			padding: 10px;
			width: 130px;
			height: 75px;
			color: white;
			font-family: sans-serif;
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			background-color: rgba(0, 0, 0, .40);
			opacity: 0;
			pointer-events: none;
		}

</style>
</head>
<body>
	<div align= "center" id="container">

<h1>The Wiz Kidz Regular Season vs Playoffs</h1>
		
		<p>This is a comparison of the scoring performance of the players during the regular season vs the playoffs. The contrast of blue in the chart corresponds to the players FG%. Move mouse pointer over bar to get additional player information.</p>

<div align= "center" class="chartContainer" id="RegularSeasonContainer">
			<h2>Regular Season Scoring Statistics per Game</h2>
				<div align= "center" id="buttonContainer">
				<button id="sortAscending">Sort Ascending</button>
				<button id="sortDescending">Sort Descending</button>
				</div>
		</div>

<div align= "center" class="chartContainer" id="PlayoffsContainer">
			<h2>Playoff Scoring Statistics per Game</h2>
				<div align= "center" id="buttonContainer2">
				<button id="sortAscending2">Sort Ascending</button>
				<button id="sortDescending2">Sort Descending</button>
				</div>
		</div>
		
		<div id="footer">
			<p><strong>Note:</strong> The data for these charts was taken from BasketballReference.com</p>
		</div>

</div>

var sortByNameOrValue = false;

//New, dynamic width value pulled from .chartContainer
var w = d3.select(".chartContainer").node().clientWidth;

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

d3.csv("teams_WAS_2015_per_game.csv", function(error, dataset) {
// console.log(dataset)

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05)
		.domain(dataset.map(function(d) { return d.Player; }));

var name = function(d) { return d.Player; };

var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .05)
		.domain(d3.range(dataset.length))

var y = d3.scale.linear().rangeRound([height , 0])
		.domain([0, d3.max(dataset.map(function(d) { return +d.PTS; }))+6.4]);

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

var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left")
	    .ticks(20);

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

var groups = svg.selectAll("g")
		.data(dataset)
		.enter()
		.append("g")
		.attr("class", "bar")
		.attr("transform", function(d, i) {
			return "translate(" + xScale(i) + ",0)";
				})

var rects = groups.append("rect")
			.attr("x", 10)  //All rects are at zero, relative to their groups
			.attr("y", function(d) {
				return height;
				})
			.attr("width", x.rangeBand()) // important
			.attr("height", 0)
			.attr("fill", "white");

//Here's a fuckin Hack
		groups.append("text")
			.text( function(d){
				return name(d);
			})
			.style("text-anchor", "end")
			.attr("font-family", "sans-serif")
			.attr("fill", "white")
			.attr("font-size", 11)
	      	.attr("x", -320) 
			.attr("y", 220)
	      	.attr("transform", "rotate(-60)" );

rects.transition()
		.delay(function(d, i) {
				return i * 50;
			})
			.duration(300)
			.attr("y", function(d) {
				return y(d.PTS);
			})
			.attr("height", function(d) {
				return height - y(d.PTS);
			})
			.attr("fill", function(d){ return "rgb(0,0,"+260*((d.eFGperc-0.30)*3/0.73)+")"} );

svg.append("g")
	      .attr("class", "y axis")
	      .attr("opacity", 0)	
	      .call(yAxis)
	      .transition()			//Initialize a new transition
			.delay(200)			//Set a 2-second delay
			.duration(800)			//Set a duration of 1.5 seconds
			.attr("opacity", 1)
			.attr("transform","translate(10,0)" )

d3.select("#sortAscending")
	.on("click", function(d) {
		
		groups.sort(function(a, b) {
					return d3.ascending(+a.PTS, +b.PTS);
			})
			.transition()
			.delay(function(d, i) {
				return i*40 ;
			})
			.duration(500)
			.attr("transform", function(d, i) {
		  		return "translate(" + xScale(i) + ",0)";
			});

});

d3.select("#sortDescending")
	.on("click", function(d) {
		
		groups.sort(function(a, b) {
					return d3.descending(+a.PTS, +b.PTS);
			})
			.transition()
			.delay(function(d, i) {
				return i*40 ;
			})
			.duration(500)
			.attr("transform", function(d, i) {
		  		return "translate(" + xScale(i) + ",0)";
			});

});
});

d3.csv("teams_WAS_2015_playoffs_per_game.csv", function(error, dataset) {
// console.log(dataset)

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05)
		.domain(dataset.map(function(d) { return d.Player; }));

var name = function(d) { return d.Player; };

var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .05)
		.domain(d3.range(dataset.length))

var y = d3.scale.linear().rangeRound([height , 0])
		.domain([0, d3.max(dataset.map(function(d) { return +d.PTS; }))+.6]);

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

var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left")
	    .ticks(20);

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

var groups = svg.selectAll("g")
		.data(dataset)
		.enter()
		.append("g")
		.attr("class", "bar")
		.attr("transform", function(d, i) {
			return "translate(" + xScale(i) + ",0)";
				})

d3.select("#sortAscending2")
	.on("click", function(d) {
		
		groups.sort(function(a, b) {
					return d3.ascending(+a.PTS, +b.PTS);
			})
			.transition()
			.delay(function(d, i) {
				return i*40 ;
			})
			.duration(500)
			.attr("transform", function(d, i) {
		  		return "translate(" + xScale(i) + ",0)";
			});

});

d3.select("#sortDescending2")
	.on("click", function(d) {
		
		groups.sort(function(a, b) {
					return d3.descending(+a.PTS, +b.PTS);
			})
			.transition()
			.delay(function(d, i) {
				return i*40 ;
			})
			.duration(500)
			.attr("transform", function(d, i) {
		  		return "translate(" + xScale(i) + ",0)";
			});

});

d3.selectAll("g.bar")
		.on("mouseover", function(d) {

var thisName = d.Player;

d3.selectAll("g.bar")
				.filter(function(d) {

if (thisName == d.Player) {
						return true;  //…then it's a match
					}
				})
				.classed("highlight", true);

var x1 = d3.event.pageX + 30;
			var y1 = d3.event.pageY - 100;

d3.select("#tooltip")
				.style("left", x1 + "px")
				.style("top", y1 + "px")
				.style("opacity", 1)
				.html("Total Points: "+d.PTS+ "<br/>"+" 3 Pointers: "+d.ThreeP+"<br/>"+" 2 Pointers: "+d.TwoP+ "<br/>"+" Free Throws: "+d.FT+ "<br/>"+"Field Goal: "+Math.round((d.eFGperc*100), -1)+"%");

})
	.on("mouseout", function() {

d3.selectAll("g.bar")
				.classed("highlight", false);
						//Hide the tooltip
			d3.select("#tooltip")
				.style("opacity", 0);

})
});

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

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

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