JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<script src="https://rawgit.com/musically-ut/d3-circle-text/master/circle-text/circle-text.js"></script>

CSS

text {
    font-size: 30px;
    
}
text.parent {
    fill: #1f77b4;
}
text {
    font: 30px sans-serif;
}


 text:hover {
    font-weight: bold;
    stroke: #000;
    stroke-width: 0.5px;
    text-decoration: underline;
}


circle {
    fill: #f4fcff;
    stroke: #37778F;
    pointer-events: all;
}

circle.parent {
    fill: #fff;
    fill-opacity: .1;
    stroke: steelblue;
}
circle.parent:hover {
    stroke: #ff7f0e;

    stroke-width: .5px;
}
circle.child {
    pointer-events: none;

    
}




/*Node hover*/
 /*.node {
    cursor: pointer;
}
.node:hover {
    stroke: #000;
    stroke-width: 1.5px;
}
.node--leaf {
    fill: white;
}
*/

/*Circle text*/
    .label {
        font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-anchor: middle;
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }
    
    .label,
    .node--root,
    .node--leaf {
        pointer-events: none;
    }
    
    .arc-path {
        visibility: hidden;
    }

JavaScript

var data = [
    //Country,Organisation,entityid
    {"Country":"segment 0","Organisation":"😍"},
    {"Country":"segment 2","Organisation":"😋"},
    {"Country":"segment 3","Organisation":"❤"},
    {"Country":"segment 3","Organisation":"😘"},
    {"Country":"segment 2","Organisation":"🤗"},
    {"Country":"segment 1","Organisation":"😊"},
    {"Country":"segment 1","Organisation":"😉"},
    {"Country":"segment 3","Organisation":"😁"},
    {"Country":"segment 3","Organisation":"💪"},
    {"Country":"segment 2","Organisation":"👌"},
    {"Country":"segment 3","Organisation":"😂"},
    {"Country":"segment 0","Organisation":"🍌"},
    {"Country":"segment 0","Organisation":"☺"},
    {"Country":"segment 2","Organisation":"😄"},
    {"Country":"segment 3","Organisation":"😀"},
    {"Country":"segment 2","Organisation":"😃"},
    {"Country":"segment 3","Organisation":"🤔"},
    {"Country":"segment 3","Organisation":"💜"},
    {"Country":"segment 0","Organisation":"🍓"},
    {"Country":"segment 1","Organisation":"😎"},
    {"Country":"segment 0","Organisation":"🍍"},
    {"Country":"segment 3","Organisation":"🍫"}
]

var w = 860,
    //h = 800,
    r = 600,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root,
    format = d3.format(",d");

var focus = root,
    view;

var circleText = d3.circleText()
                    .radius(function(d) {
                        return d.r - 5;
                    })
                    .value(function(d) {
                        return d.key; //Get lables
                    })
                    .method('align')
                    .spacing('exact')
                    .fontSize('100%');

//Declare the D3 layout type and set accessor functions
var pack = d3.layout.pack()
    .size([r, r])
    .children(function(d) {
        return d.values; // accessor for children
    })
    .value(function(d) {
        return d.values; // accessor for values
    });

//Declare SVG attributes
var svg =...