JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

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],
           ...