JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<meta charset="utf-8">
<script type=" text/javascript " src="http://code.jquery.com/jquery-latest.js "></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="draw_net.js"></script>


<title>Library of Perovskite structures from Materials Project Database</title>
<div id="title_main">
    <h2>Graph Network of Perovskite structures from Materials Project Database</h2>
</div>

<link rel="stylesheet" href="pvs-net.css" />


<div style="width: 80%; float:left; overflow: auto;">
    <div id="Perovskite_Network">
        <div style="width: 50%; float:left;">
            <div id="Network1">
                <div id="title_1">
                    <h3>Isomap Graph Network</h3>
                </div>
            </div>

            <div id="Network2">
                <div style="width: 50%; float:left; overflow: auto;"></div>
                <div id="title_2">
                    <h3>Spectral Clustering on Isomap Graph Network</h3>
                </div>
            </div>
        </div>

        <div style="width: 50%; float:right; overflow: auto;">
            <div id="Network3">
                <div id="title_3">
                    <h3>Calculated Cohesive Energy</h3>
                </div>
            </div>
            <div id="Network4">
                <div id="title_4">
                    <h3>Similarity score against CaTiO3</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="width: 20%; height: 500px; float:right;">
    <div id="HSA_fingerprint">
        <div id="title">
            <h3>Hirschfeld Surface Fingerprint Plot</h3>
        </div>

    </div>
</div>

JavaScript

var drawNetworkFunction = function(descriptor, chartId) {
var width = 470;
var height = 310;
var toggle = 0;
var activenode;

var svg = d3.select(chartId).append("svg")
    .attr("width", width)
    .attr("height", height);

var container = svg.append("g")
    .attr("class", "everything");

if (descriptor == "id" || descriptor == "cluster") {
    var color = d3.scaleOrdinal(d3.schemeCategory10);
}

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) {
        return d.id;
    }))
    .force("charge", d3.forceManyBody().strength(-7))
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("https://api.myjson.com/bins/m3gd8", function(graph) {

    if (descriptor == "cohesive") {
        var cscale = d3.scaleLinear()
            .domain([1.6, 7.2])
            .range([0, 1]);
    } else if (descriptor == "similarity") {
        var cscale = d3.scaleLinear()
            .domain([0, 1])
            .range([0, 1]);
    }

    var link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
        .attr("stroke", "#000")
        .attr("stroke-opacity", "0.1");


    var node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(graph.nodes)
        .attr("pvs_id", function(d) { return d.id; })
        .enter().append("circle")
        .attr("r", 5)
        .attr("fill", function(d) {
            var col = '';
            if (descriptor == "id") {
                col = color(d.group);
            } else if (descriptor == "cluster") {
                col = color(d.cluster);
            } else if (descriptor == "cohesive") {
                col = d3.interpolatePurples(cscale(d.cohesive));
            } else if (descriptor == "similarity") {
                col = d3.interpolateReds(cscale(d.similarity));
            }
            return col;
        })
        .call(d3.drag()
            .on("start",...