JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<script src="https://rawgithub.com/jrideout/melt.js/master/melt.js"></script>
<div id="pie"></div>

JavaScript

var pieChart = dc.pieChart("#pie");

var testData = [
    {"Pass": "10", "Fail": "20", "Untested": "40"},
    {"Pass": "20", "Fail": "40", "Untested": "50"},
    {"Pass": "30", "Fail": "50", "Untested": "60"}
];

var ndx = crossfilter(melt(testData,[],"result")),
    resultDim  = ndx.dimension(function(d) {return d.result;}),
    totPerResult = resultDim.group().reduceSum(function(d) {return +d.value;});

console.log(resultDim.groupAll().value(),melt(testData,"result"));

pieChart
    .width(300).height(300)
    .dimension(resultDim)
    .group(totPerResult);

dc.renderAll();