JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js"></script>
<div id="chart-ring-year"></div>

<div id="chart-hist-spend"></div>
<div id="chart-row-spenders"></div>

CSS

div.dc-chart {
    float: left;
}

.dc-chart rect.bar {
    stroke: none;
    cursor: pointer;
}

.dc-chart rect.bar:hover {
    fill-opacity: .5;
}

.dc-chart rect.stack1 {
    stroke: none;
    fill: red;
}

.dc-chart rect.stack2 {
    stroke: none;
    fill: green;
}

.dc-chart rect.deselected {
    stroke: none;
    fill: #ccc;
}

.dc-chart .empty-chart .pie-slice path {
    fill: #FFEEEE;
    cursor: default;
}

.dc-chart .empty-chart .pie-slice {
    cursor: default;
}

.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-chart .pie-slice.external{
    fill: black;
}

.dc-chart .pie-slice :hover {
    fill-opacity: .8;
}

.dc-chart .pie-slice.highlight {
    fill-opacity: .8;
}

.dc-chart .selected path {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected path {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.dc-chart .axis text {
    font: 10px sans-serif;
}

.dc-chart .grid-line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .grid-line line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
    z-index: -999;
}

.dc-chart .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}

.dc-chart .brush .resize path {
    fill: #eee;
    stroke: #666;
}

.dc-chart path.line {
    fill: none;
    stroke-width: 1.5px;
}

.dc-chart circle.dot {
    stroke: none;
}

.dc-chart g.dc-tooltip path {
    fill: none;
    stroke: grey;
    stroke-opacity: .8;
}

.dc-chart path.area {
    fill-opacity: .3;
    stroke: none;
}

.dc-chart .node {
    font-size: 0.7em;
    cursor: pointer;
}

.dc-chart .node :hover {
    fill-opacity: .8;
}

.dc-chart .selected circle {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected circle...

JavaScript

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.csv("spendData.csv", function(error, spendData) {
    console.log(error);
    console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {
    d.Spent = d.Spent.match(/\d+/);
});
// set crossfilter
var ndx = crossfilter(spendData),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendHist    = spendDim.group().reduceCount();
yearRingChart
    .width(200).height(200)
    .dimension(yearDim)
    .group(spendPerYear)
    .innerRadius(50);
spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(spendHist)
    .x(d3.scale.linear().domain([0,10]))
    .elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);
spenderRowChart
    .width(350).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .elasticX(true);
dc.renderAll();            
});