JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/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="dropdown_container" style="align:left;">
<p id="anchor">Select Country To See Individual Emission Sources</p>
</div>
<div class="container-fluid" id="right">
<div class="row-fluid">
<div class="col-xs-12">
<div id="heading_1" class="heading_small"></div>
<div class="span4" id="chart_4"></div>
</div>
</div>
<div class="row-fluid">
    <div class="col-xs-2">
    <div id="heading_2" class="heading_small"></div>
        <div class="span4" id="chart_1"></div>
    </div>
    <div class="col-xs-2">
     <div id="heading_3" class="heading_small"></div>
        <div class="span4" id="chart_2"></div>
    </div>
    <div class="col-xs-2">
     <div id="heading_4" class="heading_small"></div>
        <div class="span4" id="chart_3"></div>
    </div>
    <div class="col-xs-2">
        <div id="heading_5" class="heading_small"></div>
        <div class="span4" id="chart_5"></div>
    </div>
    </div>
</div>

JavaScript

function checkIt(error, root){
var partition = d3.layout.partition()
                  .value(function(d) { return d.Total; });
        
var dropDown = d3.select("#dropdown_container")
                   .append("select")
                   .attr("class", "selection")
                    .attr("name", "country-list");

    var nodeArr = partition.nodes(root);
    var options = dropDown.selectAll("option")
                  .data(nodeArr)
                  .enter()
                  .append("option");

  options.text(function (d) {
            var prefix = new Array(d.depth + 1);
      var dropdownValues =  d.name.replace(/[_-]/g, " ");
      return dropdownValues;
    }).attr("value", function (d) {
      var dropdownValues = d.name;
            return dropdownValues;
    });

  d3.select(".selection").on("change", function changePie() {
    var value = this.value;
    var index = this.selectedIndex;
    var dataObj = nodeArr[index];
      d3.select("#heading_2 text").remove();  
   var heading =  d3.select("#heading_2")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Electricity and Heat");
    //chart 1
    var elec_plants = dataObj["Main activity electricity plants"];
    var chp_planrs = dataObj["Main activity CHP plants"];
    var auto_pro = dataObj["Unallocated autoproducers / Other energy industry own use"];
    var other_elec = dataObj["Other electricity"];

    var chart = c3.generate({
    bindto: "#chart_1",
    data: {
        columns: [
            ['electricity plants', elec_plants],
            ['CHP plants', chp_planrs],
            ['Unallocated autoproducers / Other energy industry own use', auto_pro],
            ['Other', other_elec],
        ],
        type : 'pie'
    },
        empty: { label: { text: "No Data Available" }   },
    legend: {
        show: false
    },
    color: {
        pattern: ["#d73027", "#fc8d59",...