Baseball Statistics Histogram II - Webcharts-templates

This chart shows the distribution of various batting statistics from the 2012 baseball season. At Bats are shown by default, but you can update the chart to show other statistics using the dropdown and filter by team and position. The chart was created using webcharts and the add-on webcharts-templates library and the histogram template can easily be applied to other data sources.

<html lang="en">
<title>Webcharts Template - Testing Grounds</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body style="padding:1em;">
</body>
<script>	
	//load the template
	webCharts.loadTemplates({name:"simpleHistogram",tmpl:simpleHistogram})

//Custom Controls
	var controls = webCharts.createControls('body', {	
		location: 'top', 
		inputs:[
			{type: "subsetter", value_col: "POS", label: "Filter by Position"},
			{type: "subsetter", value_col: "Team", label: "Filter by Team"}
		]
	})
  
  //initialize the chart
	var myHist = webCharts.createTemplatedChart("body", {start_value:"AB"}, controls, "simpleHistogram")
	
	//load data and render the histogram
	d3.csv('baseball.csv', function(error, data){
  		myHist.init(data);
	});
</script>
</html>

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

Updated missing url https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js to https://cdn.jsdelivr.net/gh/rhoinc/webcharts/build/webcharts.js

Updated missing url https://rawgit.com/RhoInc/Webcharts-templates/master/build/webcharts-templates.js to https://cdn.jsdelivr.net/gh/rhoinc/webcharts-templates/build/webcharts-templates.js

Updated missing url https://rawgit.com/RhoInc/Webcharts-templates/master/lib/simpleHistogram.js to https://cdn.jsdelivr.net/gh/rhoinc/webcharts-templates/lib/simplehistogram.js

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

https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js

https://rawgit.com/RhoInc/Webcharts-templates/master/build/webcharts-templates.js

https://rawgit.com/RhoInc/Webcharts-templates/master/lib/simpleHistogram.js