2010-2016 Nats Top 3

<!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>

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+/);
});

// 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>

Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js

https://dc-js.github.io/dc.js/js/d3.js

https://dc-js.github.io/dc.js/js/crossfilter.js

https://dc-js.github.io/dc.js/js/dc.js

https://rawgit.com/crossfilter/reductio/master/reductio.js

https://npmcdn.com/universe@latest/universe.js