JSFiddle - React, Tailwind, and code Playground

by Daniel Ha

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<pre...

CSS

pre {display:none;}

JavaScript

var phylumchart = dc.pieChart("#phylum");
var classchart  = dc.pieChart("#class");
var data = d3.csv.parse( d3.select("pre#data").text() );



  var ndx           = crossfilter(data);
  var phylumDimension  = ndx.dimension(function(d) {return d.phylum;});
  var phylumSumGroup = phylumDimension.group().reduceSum(function(d) {return d.count;});
  var classDimension = ndx.dimension(function(d) {return d.class;});
  var classSumGroup = classDimension.group().reduceSum(function(d) {return d.count;});

  phylumchart
    .width(768)
    .height(480)
    .slicesCap(4)
    .innerRadius(100)
    .dimension(phylumDimension)
    .group(phylumSumGroup)
    .legend(dc.legend());

  classchart
    .width(768)
    .height(480)
    .slicesCap(4)
    .innerRadius(100)
    .dimension(classDimension)
    .group(classSumGroup)
    .legend(dc.legend());

  dc.renderAll();