JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
  <div id="left"></div>

JavaScript

function checkIt(data){
var countriesByName = d3.nest()
.key(function(d) { return d.Country_Names; })
.entries(data);
    
    //console.log(countriesByName)
    
var data = JSON.stringify(countriesByName)
console.log(data)
    
  
function makePie(){
    
     function myfunc(data){
 
                      var obj =  [];
                      for (var i in data.key) {
                              obj.push('Road' + m.countriesByName[i].key.values[i].Food+ ' and tobacco');
                                       }
                       }
    var data1 =  myfunc(data)
   //console.log(data)

    var chart = c3.generate({
        
   bindto: "#left",
       
    data: {
        columns: [
            data1
        ],
        type : "donut" 
        }
        
});
}
    makePie();
};



d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json", checkIt);