JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<title>Circle Layout and Edge Bundling</title>

<!-- JavaScript Libraries //-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

function addTooltip(circle) {
    var x = parseFloat(circle.attr("cx"));
    var y = parseFloat(circle.attr("cy"));
    var r = parseFloat(circle.attr("r"));
    var text = circle.attr("id");

    var parent = d3.select(circle.node().parentNode);

    var tooltip = parent.append("text")
        .text(text)
        .attr("x", x)
        .attr("y", y)
        .attr("dy", -r * 2)
        .attr("dx", 0)
        .attr("id", "tooltip")
        .attr("text-anchor", "middle");

    var outerBBox = parent.node().getBBox();
    var innerBBox = tooltip.node().getBBox();

    var outerMin = outerBBox.x;
    var innerMin = innerBBox.x;

    var outerMax = outerBBox.x + outerBBox.width;
    var innerMax = innerBBox.x + innerBBox.width;

    var epsilon = 1;

    // check if too close to edge
    if (Math.abs(innerMin - outerMin) < epsilon) {
        tooltip.attr("text-anchor", "start");
        tooltip.attr("dx", -r);
    }
    else if (Math.abs(innerMax - outerMax) < epsilon) {
        tooltip.attr("text-anchor", "end");
        tooltip.attr("dx", r);
    }
}

function circleLayout(nodes, radius) {
    // use to scale node index to theta value
    var polar = d3.scale.linear()
        .domain([0, nodes.length])
        .range([0, 2 * Math.PI]);

    // calculate theta for each node
    nodes.forEach(function(d, i) {
        // calculate polar coordinates
        var theta  = polar(i);

        // convert to cartesian coordinates
        // and shift by radius to center circle
        d.x = radius * Math.sin(theta) + radius;
        d.y = radius * Math.cos(theta) + radius;
    });
}

/*
 * Draws nodes with tooltips (using addTooltip.js), using the "group" attribute
 * to assign fill color. Requires an identifier to where the nodes should be
 * appended (such as an SVG group or image). Will have class "node" for style.
...

CSS

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
}

b {
    font-weight: 900;
}

.outline {
    fill: none;
    stroke: #888888;
    stroke-width: 1px;
}

#tooltip {
    font-size: 10pt;
    font-weight: 900;

    fill: #000000;
    stroke: #ffffff;
    stroke-width: 0.25px;
}

.node {
    stroke: #ffffff;
    stroke-weight: 1px;
}

.link {
    fill: none;
    stroke: #888888;
    stroke-weight: 1px;
    stroke-opacity: 0.5;
}

.highlight {
    stroke: red;
    stroke-weight: 4px;
    stroke-opacity: 1.0;
}