JSFiddle - React, Tailwind, and code Playground

by SHELDON PASCIAK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<p id="edges"></p>
<p>
SEE VISUAL BELOW
</p>

CSS

.link line {
  stroke: #696969;
}

.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}

.node circle {
  stroke: #000;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

JavaScript

var graph = {
  "nodes": [
    {"atom": "O", "size": 16},//
    {"atom": "C", "size": 12},//
    {"atom":"N", "size": 14},//
    {"atom": "C", "size": 12},//
    {"atom": "C", "size": 12},//
    {"atom": "C", "size": 12},//
    {"atom": "N", "size": 14},//
    {"atom": "C", "size": 12},//
    {"atom": "H", "size": 1},//
    {"atom": "H", "size": 1},//
    {"atom": "H", "size": 1},//
    {"atom": "N", "size": 14},//
    {"atom": "C", "size": 12},//
    {"atom": "H", "size": 1},//
    {"atom": "N", "size": 14},//
    {"atom": "C", "size": 12},//
    {"atom": "H", "size": 1},//
    {"atom": "H", "size": 1},//
    {"atom": "H", "size": 1},//
    {"atom": "C", "size": 12},//
    {"atom": "H", "size": 1},//
    {"atom": "H", "size": 1},//
    {"atom": "H", "size": 1},//
    {"atom": "O", "size": 16}//
  ],
  "links": [
    {"source": 0, "target": 1,  "bond": 2},//o to c
    {"source": 1, "target":2, "bond":1},//c to n
    {"source":1, "target":3, "bond":1},//c to c
    {"source":3, "target":4, "bond": 2},//c to c 
    {"source": 2, "target":5, "bond": 1},//first n to c
    {"source": 5, "target":6, "bond": 1},//c to second n
    {"source": 4, "target": 6, "bond": 1},//double bonded to n
    {"source": 6, "target": 7, "bond": 1},//second n to c
    {"source": 8, "target": 7,"bond":1 }, //h to c
    {"source": 9, "target": 7, "bond":1},
    {"source": 10, "target": 7, "bond": 1},
    {"source": 11, "target": 4, "bond": 1}, // C to third N
    {"source": 11, "target": 12, "bond": 2}, //third n to double c
    {"source": 12, "target": 13, "bond": 1}, //c to h
    {"source": 12, "target": 14, "bond": 1}, //c to n
    {"source": 14, "target": 3, "bond":1},//n to second c
    {"source": 14, "target": 15, "bond":1},// n to c
    {"source": 16, "target": 15, "bond":1},
    {"source": 17, "target": 15, "bond":1},
    {"source": 18, "target": 15, "bond":1}, //h3 to c
    {"source": 19, "target": 2, "bond": 1}, // first n to c
    {"source": 20, "target": 19, "bond": 1},
   ...