D3 Examples - Baseball Statistics Histogram II

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.

xxxxxxxxxx
 
<html lang="en">
<title>Webcharts Template - Testing Grounds</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
​
<link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/Webcharts/master/css/webcharts.css">
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rhoinc/webcharts/build/webcharts.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rhoinc/webcharts-templates/build/webcharts-templates.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rhoinc/webcharts-templates/lib/simplehistogram.js"></script>
​
</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>
    