A different take on the previous experiment, this time using a color encoding and without complex cursors (hopefully resulting in a more readable code).
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>Half matrix for symmetrical relations</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg height="500" width="960"></svg>
<script src="index.js"></script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js