D3 Examples - 2010-2016 Nats Top 3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
    .body text {font: 10px sans-serif}
  </style>
</head>
<body>
<div id="chart-ring-year"></div>
<div id="chart-hist-spend"></div>
<div id="chart-row-spenders"></div>
​
<script>
​
var yearRingChart   = dc.pieChart("#chart-ring-year"),
    spendHistChart  = dc.barChart("#chart-hist-spend"),
    spenderRowChart = dc.rowChart("#chart-row-spenders");
​
// use static or load via d3.csv("spendData.csv", function(error, spendData) {/* do stuff */});
//d3.tsv("nats_2010-2016.tsv", type, function(error, data) {
​
var spendData = [
    {Name: 'Stephen Strasburg', ERA: '2.91', Year: 2010},
    {Name: 'Stephen Strasburg', ERA: '1.5', Year: 2011},
    {Name: 'Gio Gonzalez', ERA: '2.89', Year: 2012},
    {Name: 'Stephen Strasburg', ERA: '3.16', Year: 2012},
    {Name: 'Gio Gonzalez', ERA: '3.36', Year: 2013},
    {Name: 'Stephen Strasburg', ERA: '3', Year: 2013},
    {Name: 'Stephen Strasburg', ERA: '3.14', Year: 2014},
    {Name: 'Gio Gonzalez', ERA: '3.57', Year: 2014},
    {Name: 'Gio Gonzalez', ERA: '3.79', Year: 2015},
    {Name: 'Stephen Strasburg', ERA: '3.46', Year: 2015},
    {Name: 'Max Scherzer', ERA: '2.79', Year: 2015}
  
];
​
// normalize/parse data
spendData.forEach(function(d) {
    d.ERA = d.ERA.match(/\d+/);
});
​
function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}
​
// set crossfilter
var ndx = crossfilter(spendData),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return d.ERA;}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceSum(function(d) {return +d.ERA;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.ERA;}),
    spendHist    = spendDim.group().reduceCount(),
    nonEmptyHist = remove_empty_bins(spendHist)
​
yearRingChart
    .width(200).height(200)
    .dimension(yearDim)
    .group(spendPerYear)
    .innerRadius(50);
​
spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(nonEmptyHist)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true);
​
spendHistChart.xAxis().tickFormat(function(d) {return d}); // convert back to base unit
spendHistChart.yAxis().ticks(10);
​
spenderRowChart
    .width(350).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .elasticX(true);
​
dc.renderAll();
​
</script>
​
​
</html>
    