JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.d3dash.com/js/d3dash/colorbrewer.js"></script>
        <div id="main">
            <div id="sequence">
                <div id='root'>
                    <i class="fa fa-home"></i> root
                </div>
            </div>
            <div id="chart">
                <div id="explanation" style="visibility: hidden;">
                    <span id="percentage"></span>
                    <br/>
                    <span id="currentNode">{{currentNode}}</span>
                    <div style="percentage"></div>
                </div>
                <!--         <div id="barchart" style="visibility: hidden;">
        </div> -->
            </div>
        </div>

JavaScript

drawSunburst();

function drawSunburst() {
                    // Code goes here
                    // Dimensions of sunburst.
                    const width = 600;
                    const width1 = 1050;
                    const height = 500;
                    const radius = Math.min(width, height) / 2;

                    const x = d3.scale.linear()
                        .range([0, 2 * Math.PI]);

                    const y = d3.scale.sqrt()
                        .range([0, radius]);

                    // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
                    var b = {
                        w: 170,
                        h: 30,
                        s: 2,
                        t: 40
                    };

                    // Mapping of step names to colors.
                    var colors = d3.scale.category20b();

                    var brewerColors = d3.entries(colorbrewer);
                    // offsets 1-5 look too similar
                    // offsets 6-13 offer the greatest contrast
                    // offsets 4 and above are no good
                    var brewerOffset = 10;
                    var pageTypes = ["magic", "poo", "etc", "d", "d", "d", "d", "d"];
                    var colors = [100];
                    var pages = [];
                    for (var ct = 0; ct < pageTypes.length; ct++) {
                        var colorBucket = brewerColors[ct + brewerOffset].value[pageTypes.length];
                        for (var ct2 = 0; ct2 < colorBucket.length; ct2++) {
                            pages.push(pageTypes[ct] + (ct2 + 1));
                            colors.push(colorBucket[ct2]);
                        }
                    }

                    var ramps = d3.scale.category20c()
                        // do not reverse if center color is lighter than edge colors
                        .range(colors.reverse())
                        .domain(pages.reverse());

             ...