NBA Stats by Position V2

forked from mro4354's block: NBA Stats by Position V2

<!DOCTYPE html>
<html>
<div id="chartContainer">
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://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(699, 300, 53, 333, "Right");
		svg.append("text")
			.attr("x", 230)
			.attr("y", 80).style("font-size", "18px")
			.style("font-weight", "bold")
			.text("NBA Stats by Position (Averages)");
		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","toggle stats"])
		.enter()
		.append("text")
		  .attr("x", 695)
		  .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>

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

Modified http://dimplejs.org/dist/dimple.v2.0.0.min.js to a secure url

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

https://dimplejs.org/dist/dimple.v2.0.0.min.js