JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<div id="paper"></div>

CSS

#paper{
    width : 500px;
    height : 500px;  
}

JavaScript

var r = new Raphael("paper", 500, 500);
        
        var chart = drawPieChart({
          radius : 100,
          segments : [
            {value : 0.3, fill : "#52718c", stroke : "white"}, 
            {value : 0.3, fill : "#6a8ead", stroke : "white"}, 
            {value : 0.25, fill : "#88aecf", stroke : "white"},
            {value : 0.15, fill : "#b1cce3", stroke : "white"} 
          ], 
          resolution : 0.1
        });
        
        chart.translate(200, 200);
        
        // functions to make the chart:
        
        function drawPieChart(p){
          var TWO_PI = Math.PI * 2;
          
          if (!p.resolution) p.resolution = 0.1;
          
          var pie = r.set();
          
          var leng = p.segments.length;
          var offsetAngle = 0;
          
          for (var i = 0; i < leng; i++){
            // angle is percent of TWO_PI
            var segData = p.segments[i];
            console.log(segData);
            
            var angle =  TWO_PI * segData.value;
            
            var seg = drawSegment(p.radius, angle, offsetAngle, p.resolution);
            //seg.translate(100, 100);
            
            seg.attr({stroke:segData.stroke,fill:segData.fill});
            pie.push(seg);
            offsetAngle += angle;
          }
          return pie;
        }
        
        function polarPath(radius, theta, rotation){
          var x, y;
          x = radius * Math.cos(theta + rotation);
          y = radius * Math.sin(theta + rotation);
          return "L " + x + " " + y + " "; 
        }
        
        // value and rotation are now in radians
        function drawSegment(radius, value, rotation, resolution){
          if (!resolution) resolution = 0.1;
          var path = "M 0 0 ";
          
          for (var i = 0; i < value; i+=resolution){
            path += polarPath(radius, i, rotation);
          }
          path += polarPath(radius, value, rotation);
          
          path += "L 0...