JSFiddle - React, Tailwind, and code Playground

by stuttufu

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="infoPanel"></div>
<script>
    function updateSlider(slideAmount) {
    $('#main').css('zoom',slideAmount);
    var width = (slideAmount*($('#main').width()/2))-($(window).width()/2);
    if(width < 0)
    width = 0;
    
    var height = (slideAmount*($('#main').height()/2))-($(window).height()/2);
    if(height < 0)
    height = 0;
    
    window.scrollTo(width, height);
    }
</script>

<div id="zoomSlider"><strong>Zoom:</strong> 10% <input id="slide" type="range" min="0.1" max="2" step="0.1" value="1" onchange="updateSlider(this.value)" /> 200%</div>

CSS

path.link {
    fill: none;
    stroke-width: 0.6px;
}

circle {
    fill: #bbc9db;
    stroke: #4C4F79;
    stroke-width: 2.0px;
    
}

text {
    fill: #4C4F79;
    font: 10px sans-serif;
    pointer-events: none;
}

ul{
    margin: 0;
    padding: 0;
    list-style: disc inside none;
}
ul > li{
    margin-bottom: 10px;
}
#infoPanel{
    display: none;
    position: fixed;
    padding: 12px 10px 2px;
    font-size: 16px;
    color: #4C4F79;
    font-family : sans-serif;
    line-height: 120%;
    top: 15px;
    right: 15px;
    background:  rgba(187, 201, 219, 0.7);
    border: 1px solid #4C4F79;
    box-shadow: 1px 1px 5px black;
    width: 450px;
}

#zoomSlider{
    position: fixed;
    top: 15px;
    left: 15px;
    font-family : sans-serif;
    font-size : 20px;
    color: #4C4F79;
}

JavaScript

// get the data
d3.csv("bbb.txt", function(error, csv) {
    function drawGraph(csv){
        
        var width = 4000,
            height = 4000,
            nodes = {},
            links = [];
        
        csv.forEach(function(link,index) {
            links[index] = [];
            links[index].source = nodes[link.source] || (nodes[link.source] = {name: link.source });
            links[index].target = nodes[link.target] || (nodes[link.target] = {name: link.target });
            links[index].value = link.value;
        });
        
        function tick() {
            path.attr("d", function(d) {
                var dx = d.target.x - d.source.x,
                    dy = d.target.y - d.source.y,
                    dr = Math.sqrt(dx * dx + dy * dy);
                if (dx!=0 && dy!=0) {
                    return "M" + d.target.x + ", " + d.target.y 
                    + "L" + d.source.x + ", " + d.source.y ;
                    
                    
                    // arrows in the other direction
                    // if (dx!=0 && dy!=0) {
                    //     return "M" + d.source.x + ", " + d.source.y 
                    //     + "L" + d.target.x + ", " + d.target.y ;
                    
                    
                    // here are the arches 
                    // return "M" + 
                    //     d.source.x + "," + 
                    //     d.source.y + "A" + 
                    //     dr + "," + dr + " 0 0,1 " + 
                    //     d.target.x + "," + 
                    //     d.target.y;
                } else {
                    return "M" + 
                        d.source.x + "," + 
                        d.source.y + "a" + 
                        30 + "," + 30 + " 0 1,1 " + "0.001,0";  
                    
                }
            });
            
            node.attr("transform", function(d) { 
                return "translate(" + d.x + "," + d.y + ")"; }
                     );
       ...