JSFiddle - React, Tailwind, and code Playground

by Daniel Ha

HTML

<script src="http://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<div id="bacPhy">
	 <h2>PHYLUM</h2>
         <a class="reset" href="javascript:phylumchart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
        <div class="clearfix"></div>
</div>
<div id="bacClas">
	    <h2>CLASS</h2>
        <a class="reset" href="javascript:classchart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
		<div class="clearfix"></div>
</div>

<pre...

CSS

pre {display:none;}

JavaScript

var phylumchart = dc.pieChart("#bacPhy");
var classchart  = dc.pieChart("#bacClas");
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(700)
    	.height(400)
   		.slicesCap(10)
        .innerRadius(30)
        .dimension(phylumDimension)
        .group(phylumSumGroup)
        .legend(dc.legend());

  	classchart
    	.width(700)
    	.height(400)
    	.slicesCap(10)
    	.innerRadius(30)
    	.dimension(classDimension)
    	.group(classSumGroup)
    	.legend(dc.legend());

  	classchart.filter = function() {};
  

  	dc.renderAll();