JSFiddle - React, Tailwind, and code Playground

by wrdrvr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>


<body>

<div id="ford3" style="height:400px; width:400px;">

</div>
</body>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  width: 960px;
  height: 700px;
  margin-top: 10px;
}

#main {
  float: left;
  width: 750px;
}

#sidebar {
  float: right;
  width: 100px;
}

#sequence {
  width: 600px;
  height: 70px;
}

#legend {
  padding: 10px 0 0 3px;
}

#sequence text, #legend text {
  font-weight: 600;
  fill: #fff;
}

#chart {
  position: relative;
}

#chart path {
  stroke: #fff;
}

#explanation {
  text-align: center;
  font-size: 1.2em;
  color: #666;
  z-index: -1;
}

#percentage {
  font-size: 1.5em;
}

JavaScript

var id = 'ford3';
    var color = d3.scale.category20c();
  var p = d3.select("#"+id);
  var height = p[0][0].clientHeight;
  var width = p[0][0].clientWidth;
  var	margin = {
			'top' : 10,
			'bottom' : 40,
			'left' : 10,
			'right' : 10,
		};
	
	var cheight = height - margin.top - margin.bottom;
	var cwidth = width - margin.left - margin.right;
  var radius = Math.min(cwidth, cheight) / 2;
  
	var svg = p.append("svg")
          .style('height','100%')
          .style('width','100%')
        .append("g")
          .attr("transform", "translate(" + cwidth / 2 + "," + cheight * .52 + ")");
  
  var text = svg.selectAll("#explanation");
  
  var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) {return d.size;})
    .children(function (d) {return d.children});
  
  var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x})
    .endAngle(function(d) {return d.x + d.dx;})
    .innerRadius(function(d) {return Math.sqrt(d.y);})
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy);});
  var data = {"facet_pivot": {
      "cat,MFR": [
        {
          "field": "cat",
          "value": "CAT1",
          "count": 10731,
          "pivot": [
            {
              "field": "MFR",
              "value": "MFR4",
              "count": 3700
            },
            {
              "field": "MFR",
              "value": "MFR2",
              "count": 2355
            }
          ]
        },
        {
          "field": "cat",
          "value": "CAT1",
          "count": 10731,
          "pivot": [
            {
              "field": "MFR",
              "value": "MFR1",
              "count": 10000
            },
            {
              "field": "MFR",
              "value": "MFR2.",
              "count": 2355
            }
          ]
        }
      ]
    }
}

     var  data = parse_facet_pivot(data.facet_pivot['cat,MFR']);
      console.log(data);
    var path =...