JSFiddle - React, Tailwind, and code Playground

by Oliver Houston

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.links line {
  stroke: #999;
  stroke-opacity: 0.5;
}
.nodes circle {
  stroke: #000;
  stroke-width: 1px;
  stroke-opacity:0.5;
}
.locations circle {
	fill-opacity: 0.2;
	stroke: #000;
	stroke-width: 1px;
	}
.nodes .node-mouseover {
  cursor: pointer;
  stroke: #000;
  stroke-width: 1px;
}
.nodes .node-clicked {
  cursor: pointer;
  stroke: #000;
  stroke-width: 1px;
}
.tooltip {
  position:absolute;
  font: 14px sans-serif;
  background-color:#ccc;
  border: solid 1px #aaa;
  border-radius:3px;
  padding:5px;
}
.onpChart {
    display: inline-block;
    position: relative;
    width: 100%;
	height: 450px;
    padding-bottom: 0%; /* aspect ratio */
    vertical-align: top;
	overflow-y: hidden;
    overflow-x: scroll;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

JavaScript

var graph = {
"locations": [
{"name": "Cochlear", "id": 1},
{"name": "Dorsal Cochlear Nucleus", "id": 2},
{"name": "Anteroventral Cochlear Nucleus", "id": 3},
{"name": "Posteroventral Cochlear Nucleus", "id": 4}
],
"cells": [
{"id": "Inner Hair Cell", "location": 1},
{"id": "Outer Hair Cell", "location": 1},
{"id": "Type I SGN", "location": 1},
{"id": "Type II SGN", "location": 1},
{"id": "Pyramidal", "location": 2},
{"id": "Stellate", "location": 2},
{"id": "Cartwheel", "location": 2},
{"id": "Unipolar Brush", "location": 2},
{"id": "Golgi", "location": 2},
{"id": "Granule", "location": 2},
{"id": "Giant", "location": 2},
{"id": "Tuberculoventral", "location": 2},
{"id": "Spherical", "location": 3},
{"id": "Globular", "location": 3},
{"id": "T-Stellate", "location": 3},
{"id": "D-Stellate", "location": 3},
{"id": "Planar","location": 4},
{"id": "Octopus","location": 4},
{"id": "Radiate","location": 4}
],
"locCell":[
{"source": "Inner Hair Cell", "target": 1},
{"source": "Outer Hair Cell", "target": 1},
{"source": "Type I SGN", "target": 1},
{"source": "Type II SGN", "target": 1},
{"source": "Pyramidal", "target": 2},
{"source": "Stellate", "target": 2},
{"source": "Cartwheel", "target": 2},
{"source": "Unipolar Brush", "target": 2},
{"source": "Golgi", "target": 2},
{"source": "Granule", "target": 2},
{"source": "Giant", "target": 2},
{"source": "Tuberculoventral", "target": 2},
{"source": "Spherical", "target": 3},
{"source": "Globular", "target": 3},
{"source": "T-Stellate", "target": 3},
{"source": "D-Stellate", "target": 3},
{"source": "Planar","target": 4},
{"source": "Octopus","target": 4},
{"source": "Radiate","target": 4}
]
"links": [
{"source": "Inner Hair Cell", "target": "Type I SGN", "type": "E"},
{"source": "Outer Hair Cell", "target": "Type II SGN", "type": "E"},
{"source": "Type I SGN", "target": "Pyramidal", "type": "E"},
{"source": "Type I SGN", "target": "Tuberculoventral", "type": "E"},
{"source": "Pyramidal", "target": "Stellate", "type":...