JSFiddle - React, Tailwind, and code Playground

by Chris L

HTML

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="code-selection">
    <select></select>
</div>

<script>
var selectedCode = '0',
        path,
        circle,
        force,
        links,
        nodes = {},
        width = 600,
        height = 312;

var allData = {"0": {
    "1": [
        {
            "source": "0",
            "target": "PH"
        },
        {
            "source": "KR",
            "target": "1"
        },
        {
            "source": "2",
            "target": "VZ"
        },
        {
            "source": "3",
            "target": "JP"
        }
    ],
    "3": [
        {
            "source": "CT",
            "target": "4"
        },
        {
            "source": "CP",
            "target": "5"
        },
        {
            "source": "CT",
            "target": "6"
        },
        {
            "source": "PH",
            "target": "7"
        },
        {
            "source": "JP",
            "target": "8"
        },
        {
            "source": "9",
            "target": "DR"
        },
        {
            "source": "10",
            "target": "IN"
        },
        {
            "source": "KR",
            "target": "11"
        },
        {
            "source": "CP",
            "target": "12"
        },
        {
            "source": "TH",
            "target": "13"
        }
    ],
    "0": [
        {
            "source": "14",
            "target": "CP"
        },
        {
            "source": "PE",
            "target": "15"
        },
        {
            "source": "0",
            "target": "PH"
        },
        {
            "source": "16",
            "target": "CP"
        },
        {
            "source": "17",
            "target": "SE"
        },
        {
            "source": "CP",
            "target": "8"
        },
        {
            "source":...

CSS

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

    #relationship {
        stroke: #197a80;
    }

    .link.relationship {
        stroke: #197a80;
    }

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

    circle.generic {
        fill: orange;
    }