mro4354/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from mro4354's block: NBA Stats by Position

  
## index.html
<!DOCTYPE html>
<html>
<div id="chartContainer">
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <script type="text/javascript">
	var svg = dimple.newSvg("#chartContainer", 900, 1000);
		d3.csv("player_positions_x04.csv", function (data) {

		// Latest period only
		dimple.filterData(data, "Position", "C");

		var myChart = new dimple.chart(svg, data);
		myChart.setBounds(60, 100, 620, 530)
		var x = myChart.addCategoryAxis("x", ["PlayerPosition", "Stat"]);
		x.addOrderRule("Num");
		x.title = "Position";
		var y = myChart.addMeasureAxis("y", "Mean");
		y.title = "Mean";
		var s = myChart.addSeries("Stat", dimple.plot.bar);
		var myLegend = myChart.addLegend(486, 200, 53, 333, "Right");
		svg.append("text")
			.attr("x", 95)
			.attr("y", 60).style("font-size", "18px")
			.style("font-weight", "bold")
			.text("NBA Stats by Position (Averages)");
		svg.append("text")
			.attr("x", 445)
			.attr("y", 190).style("font-size", "11px")
			.text("Click on Rectangles");
		svg.append("text")
			.attr("x", 445)
			.attr("y", 203).style("font-size", "11px")
			.text("to toggle stats");
		myChart.draw();

		// This is a critical step.  By doing this we orphan the legend. This
		// means it will not respond to graph updates.  Without this the legend
		// will redraw when the chart refreshes removing the unchecked item and
		// also dropping the events we define below.
		myChart.legends = [];


		// This block simply adds the legend title. I put it into a d3 data
		// object to split it onto 2 lines.  This technique works with any
		// number of lines, it isn't dimple specific.
		svg.selectAll("title_text")
		.data(["Click rectangles to","hide shot types"])
		.enter()
		.append("text")
		  .attr("x", 699)
		  .attr("y", function (d, i) { return 280 + i * 14; })
		  .style("font-family", "sans-serif")
		  .style("font-size", "12px")
		  .style("color", "Black")
		  .text(function (d) { return d; });

		// Get a unique list of UsageType values to use when filtering
		var filterValues = dimple.getUniqueValues(data, "Stat");
		// Get all the rectangles from our now orphaned legend
		myLegend.shapes.selectAll("rect")
		// Add a click event to each rectangle
			.on("click", function (e) {
				// This indicates whether the item is already visible or not
				var hide = false;
				var newFilters = [];
				// If the filters contain the clicked shape hide it
				filterValues.forEach(function (f) {
					if (f === e.aggField.slice(-1)[0]) {
						hide = true;
					} else {
						newFilters.push(f);
					}
				});

				// Hide the shape or show it
				if (hide) {
					d3.select(this).style("opacity", 0.1);
				} else {
					newFilters.push(e.aggField.slice(-1)[0]);
					d3.select(this).style("opacity", 0.9);
				}

				// Update the filters
				filterValues = newFilters;
				// Filter the data
				myChart.data = dimple.filterData(data, "Stat", filterValues);
				// Passing a duration parameter makes the chart animate. Without
				// it there is no transition
				myChart.draw(1000);
			});
		});
    </script>
</div>
</html>


## player_positions_x04.csv

          
            Num
            PlayerPosition
            Stat
            Mean

            
              1
              PG
              PTS
              10.680904

            
              1
              PG
              AST
              3.984025

            
              1
              PG
              REB
              2.77401

            
              1
              PG
              BLK
              0.1962531

            
              1
              PG
              STL
              0.8917162

            
              2
              SG
              PTS
              9.891991

            
              2
              SG
              AST
              1.921636

            
              2
              SG
              REB
              2.749226

            
              2
              SG
              BLK
              0.2547702

            
              2
              SG
              STL
              0.6977701

            
              3
              SF
              PTS
              10.217875

            
              3
              SF
              AST
              1.680983

            
              3
              SF
              REB
              4.058035

            
              3
              SF
              BLK
              0.4001983

            
              3
              SF
              STL
              0.8791558

            
              4
              PF
              PTS
              8.613458

            
              4
              PF
              AST
              1.28781

            
              4
              PF
              REB
              4.880108

            
              4
              PF
              BLK
              0.5758742

            
              4
              PF
              STL
              0.6264245

            
              5
              C
              PTS
              8.799585

            
              5
              C
              AST
              1.276533

            
              5
              C
              REB
              6.400976

            
              5
              C
              BLK
              0.9761848

            
              5
              C
              STL
              0.5552923
	<!DOCTYPE html>
	<html>
	<div id="chartContainer">
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
	<script type="text/javascript">
	var svg = dimple.newSvg("#chartContainer", 900, 1000);
	d3.csv("player_positions_x04.csv", function (data) {

	// Latest period only
	dimple.filterData(data, "Position", "C");

	var myChart = new dimple.chart(svg, data);
	myChart.setBounds(60, 100, 620, 530)
	var x = myChart.addCategoryAxis("x", ["PlayerPosition", "Stat"]);
	x.addOrderRule("Num");
	x.title = "Position";
	var y = myChart.addMeasureAxis("y", "Mean");
	y.title = "Mean";
	var s = myChart.addSeries("Stat", dimple.plot.bar);
	var myLegend = myChart.addLegend(486, 200, 53, 333, "Right");
	svg.append("text")
	.attr("x", 95)
	.attr("y", 60).style("font-size", "18px")
	.style("font-weight", "bold")
	.text("NBA Stats by Position (Averages)");
	svg.append("text")
	.attr("x", 445)
	.attr("y", 190).style("font-size", "11px")
	.text("Click on Rectangles");
	svg.append("text")
	.attr("x", 445)
	.attr("y", 203).style("font-size", "11px")
	.text("to toggle stats");
	myChart.draw();

	// This is a critical step. By doing this we orphan the legend. This
	// means it will not respond to graph updates. Without this the legend
	// will redraw when the chart refreshes removing the unchecked item and
	// also dropping the events we define below.
	myChart.legends = [];



	// This block simply adds the legend title. I put it into a d3 data
	// object to split it onto 2 lines. This technique works with any
	// number of lines, it isn't dimple specific.
	svg.selectAll("title_text")
	.data(["Click rectangles to","hide shot types"])
	.enter()
	.append("text")
	.attr("x", 699)
	.attr("y", function (d, i) { return 280 + i * 14; })
	.style("font-family", "sans-serif")
	.style("font-size", "12px")
	.style("color", "Black")
	.text(function (d) { return d; });

	// Get a unique list of UsageType values to use when filtering
	var filterValues = dimple.getUniqueValues(data, "Stat");
	// Get all the rectangles from our now orphaned legend
	myLegend.shapes.selectAll("rect")
	// Add a click event to each rectangle
	.on("click", function (e) {
	// This indicates whether the item is already visible or not
	var hide = false;
	var newFilters = [];
	// If the filters contain the clicked shape hide it
	filterValues.forEach(function (f) {
	if (f === e.aggField.slice(-1)[0]) {
	hide = true;
	} else {
	newFilters.push(f);
	}
	});

	// Hide the shape or show it
	if (hide) {
	d3.select(this).style("opacity", 0.1);
	} else {
	newFilters.push(e.aggField.slice(-1)[0]);
	d3.select(this).style("opacity", 0.9);
	}

	// Update the filters
	filterValues = newFilters;
	// Filter the data
	myChart.data = dimple.filterData(data, "Stat", filterValues);
	// Passing a duration parameter makes the chart animate. Without
	// it there is no transition
	myChart.draw(1000);
	});
	});
	</script>
	</div>
	</html>
Num	PlayerPosition	Stat	Mean
1	PG	PTS	10.680904
1	PG	AST	3.984025
1	PG	REB	2.77401
1	PG	BLK	0.1962531
1	PG	STL	0.8917162
2	SG	PTS	9.891991
2	SG	AST	1.921636
2	SG	REB	2.749226
2	SG	BLK	0.2547702
2	SG	STL	0.6977701
3	SF	PTS	10.217875
3	SF	AST	1.680983
3	SF	REB	4.058035
3	SF	BLK	0.4001983
3	SF	STL	0.8791558
4	PF	PTS	8.613458
4	PF	AST	1.28781
4	PF	REB	4.880108
4	PF	BLK	0.5758742
4	PF	STL	0.6264245
5	C	PTS	8.799585
5	C	AST	1.276533
5	C	REB	6.400976
5	C	BLK	0.9761848
5	C	STL	0.5552923