JSFiddle - React, Tailwind, and code Playground

CSS

path.link {
        fill: none;
        stroke: #666;
        stroke-width: 1.5px;
    }

    path.link.twofive {
        opacity: 0.25;
    }

    path.link.fivezero {
        opacity: 0.50;
    }

    path.link.sevenfive {
        opacity: 0.75;
    }

    path.link.onezerozero {
        opacity: 1.0;
    }

    circle {
        fill: #ccc;
        stroke: #fff;
        stroke-width: 1.5px;
    }

    text {
        fill: #000;
        pointer-events: none;
    }
    #content {
        padding: 7px;
    }

JavaScript

// get the data
var graph = {"nodes":[{"name":"Ilya I","group":0},{"name":"Betty  B","group":1},{"name":"Andy N","group":2},{"name":"Harper P","group":3},{"name":"Holly V","group":4},{"name":"Elijah W","group":5},{"name":"Kalvin L","group":6},{"name":"Chris  D","group":7},{"name":"Alexa U","group":8}],"links":[{"source":2,"target":5,"value":1,"type":"arrow"},{"source":2,"target":6,"value":3,"type":"arrow"},{"source":2,"target":7,"value":1,"type":"arrow"},{"source":2,"target":8,"value":1,"type":"arrow"},{"source":3,"target":2,"value":1,"type":"arrow"},{"source":3,"target":4,"value":1,"type":"arrow"},{"source":3,"target":6,"value":2,"type":"arrow"},{"source":3,"target":7,"value":1,"type":"arrow"},{"source":3,"target":8,"value":3,"type":"arrow"},{"source":5,"target":5,"value":1,"type":"arrow"},{"source":6,"target":2,"value":1,"type":"arrow"}]};

var nodecolor = d3.scale.category20();

var nodes = {};

// Compute the distinct nodes from the links.
    var links = graph.links;

    var width = 900,
            height = 600;

    var force = d3.layout.force()
            .nodes(graph.nodes)
            .links(links)
            .size([width, height])
            .linkDistance(function(d) {
                return 1/d.value * 250;
            })
            .charge(-500)
            .on("tick", tick)
            .start();

// Set the range
    var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
    v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
    links.forEach(function(link) {
        if (v(link.value) <= 25) {
            link.type = "twofive";
        } else if (v(link.value) <= 50 && v(link.value) > 25) {
            link.type = "fivezero";
        } else if (v(link.value) <= 75 && v(link.value) > 50) {
            link.type = "sevenfive";
        } else if (v(link.value) <= 100 && v(link.value) > 75) {
            link.type = "onezerozero";
        }
    });

    var svg =...