onpd3

by Oliver Houston

HTML

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

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;
}
.tooltip {
  position:absolute;
  font: 14px sans-serif;
  background-color:#ccc;
  border: solid 1px #aaa;
  border-radius:3px;
  padding:5px;
}

JavaScript

var width = 500
    height = 300;
	
var svg = d3.select("#display")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
var color = d3.scaleOrdinal(d3.schemeCategory20);

var locations =
[
{"name": "Cochlear", "id": 1},
{"name": "DCN", "id": 2},
{"name": "AVCN", "id": 3},
{"name": "PVCN", "id": 4}
];
var cells = [
{"id": "IHC", "location": 1},
{"id": "OHC", "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}
];
var links = [
{"source": "IHC", "target": "Type I SGN", "type": "E"},
{"source": "OHC", "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": "E"},
{"source": "Granule", "target": "Cartwheel", "type": "E"},
{"source": "Stellate", "target": "Cartwheel", "type": "I"},
{"source": "Cartwheel", "target": "Cartwheel", "type": "I"},
{"source": "Granule", "target": "Unipolar Brush", "type": "E"},
{"source": "Unipolar Brush", "target": "Granule", "type": "E"},
{"source": "Cartwheel", "target": "Giant", "type": "I"},
{"source": "Type I SGN", "target": "Spherical", "type": "E"},
{"source": "Type I SGN", "target": "Globular", "type": "E"},
{"source": "Type I SGN", "target": "T-Stellate", "type": "E"},
{"source": "D-Stellate", "target": "T-Stellate", "type": "I"},
{"source": "Type I SGN", "target": "Planar", "type":...