JSFiddle - React, Tailwind, and code Playground

by simouns

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<div id="MyGraph"></div>

JavaScript

var myData = [{"label": "Label not ok", "importance": 100, "color": "#FF5256"},
                    {"label": "Label not ok", "importance": 100, "color": "#FF5256"},
                    {"label": "Label ok", "importance": 100, "color": "#FF5256"},
                    {"label": "Label ok", "importance": 100, "color": "#B9A031"},
                    {"label": "Label ok", "importance": 100, "color": "#B9A031"},
                    {"label": "Label ok", "importance": 100, "color": "#B9A031"},
                    {"label": "Label ok", "importance": 100, "color": "#00566D"},
                    {"label": "Label ok", "importance": 100, "color": "#00566D"},
                    {"label": "Label ok", "importance": 100, "color": "#00566D"},
                    {"label": "Label ok", "importance": 100, "color": "#73C5BF"},
                    {"label": "Label ok", "importance": 100, "color": "#73C5BF"},
                    {"label": "Label ok", "importance": 100, "color": "#73C5BF"},
                    {"label": "Label ok", "importance": 100, "color": "#a74116"},
                    {"label": "Label ok", "importance": 100, "color": "#a74116"},
                    {"label": "Label ok", "importance": 100, "color": "#a74116"},
                    {"label": "Label ok", "importance": 100, "color": "#86338F"},
                    {"label": "Label ok", "importance": 100, "color": "#86338F"},
                    {"label": "Label ok", "importance": 100, "color": "#86338F"}
            ];

      var outlineColor = [ {"color": "#FF5256"} , 
                          {"color": "#B9A031"} , 
                          {"color": "#00566D"} , 
                          {"color": "#73C5BF"} , 
                          {"color": "#CCCDCF"} , 
                          {"color": "#86338F"}
                         ];
      var angleColor = (Math.PI * 2) / 6 ; // calculate the radian angle applied to each slice



/**Canvas**/
            var nbElement = myData.length;
            var angle =...