mmakowski/gist:3b7545c144ddb9b3ecb19ede36e19928

## gistfile1.html
<html>
<head>
<style media="screen" type="text/css">
#content {
  margin-top: 2em;
  font-size: 16pt;
  font-family: monospace;
}
#nodes {
  top: 0px;
  left: 700px;
  float: right;
  position: absolute;
}
.T {
  background: #bbeeff;
  color: #446688;
  position: absolute;
  width: 2em;
  top: -1.5em;
  left: 50%;
  margin-left: -1em;
  text-align: center;
  font-size: 8pt;
  border: solid 1px #446688;
  visibility: hidden;
}
.SB {
  border-bottom: solid 1px #ff4444;
  border-left: solid 1px #ff4444;
  border-right: solid 1px #ff4444;
  // TODO: height: 0.5em;
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="canvas"></div>
<div id="spanbox" style='float:left; position:absolute; top:2em; left:2em'>

<div id="content">
<span class="SB" id="sb1"><span class="sbstart" id="sb1start"></span><span style="position: relative" id="mary1"><span class="T">NN</span>Mary</span> had a lamb.<span id="sb1end"></span></span> <span class="SB" id="sp2"><span id="sb2start"></span>Mary ate the lamb.<span id="sb2end"></span></span> <span class="SB" id="sb3"><span id="sb3start"></span>Mary rejoiced.<span id="sb3end"></span></span>
</div>

<div id="nodes">
<div id="people">People:
<span class="person" id="mary" ids="mary1">Mary</span>
</div>
</div>

</div>
</body>
<script type="application/x-javascript">

// after http://stackoverflow.com/a/623770/424978

function generateNodeSet() {
  var spans = document.getElementsByTagName("span");
  var retarr = [];
  for (var i=0;i<spans.length; i++) {
     retarr[retarr.length] = spans[i].id;
  }
  return retarr;
}

function generateLinks(nodeIds) {
  var retarr = [];
  for(var i=0; i<nodeIds.length; i++) {
    var id = nodeIds[i];
    var span = document.getElementById(id);
    if (!span) continue;
    var atts = span.attributes;
    var ids_str = false;
    if((atts.getNamedItem) && (atts.getNamedItem('ids'))) {
      ids_str = atts.getNamedItem('ids').value;
    }
    if(ids_str) {
      retarr[id] = ids_str.split(" ");
    }
  }
  return retarr;
}

function drawArrow(graph, fromelem, toelem) {
  var canvasdiv = document.getElementById("canvas");
  var spanboxdiv = document.getElementById("spanbox");
  var nodesdiv = document.getElementById("nodes");
  var contentdiv = document.getElementById("content");
  var canvasTop = canvasdiv.offsetTop - spanboxdiv.offsetTop;

  var x1 = fromelem.offsetLeft + spanboxdiv.offsetLeft + nodesdiv.offsetLeft - canvasdiv.offsetLeft;
  var x2 = toelem.offsetLeft + toelem.offsetWidth + spanboxdiv.offsetLeft + contentdiv.offsetLeft - canvasdiv.offsetLeft;
  var y1 = fromelem.offsetTop + fromelem.offsetHeight - canvasTop;
  var y2 = toelem.offsetTop + toelem.offsetHeight - canvasTop;
  graph.append("svg:line")
      .attr("x1", x1)
      .attr("y1", y1)
      .attr("x2", x2)
      .attr("y2", y2)
      .style("stroke", "rgb(0,180,0)");
}

var canvasTop = 0;

function draw() {
  nodeset = generateNodeSet();
  linkset = generateLinks(nodeset);

  var lineGraph = d3.select("#canvas")
    .append("svg:svg")
    .attr("width", 1000)
    .attr("height", 1000);

  for(var key in linkset) {
    for (var i=0; i<linkset[key].length; i++) {
      fromid = key;
      toid = linkset[key][i];
      drawArrow(lineGraph,document.getElementById(fromid),document.getElementById(toid));
    }
  }
}

function drawLink(graph, x1, y1, x2, y2) {
}

function undraw() {
  d3.selectAll(document.getElementById("canvas").childNodes).remove()
}

document.getElementById("mary").onmouseover = draw;
document.getElementById("mary").onmouseout = undraw

</script>
</html>
	<html>
	<head>
	<style media="screen" type="text/css">
	#content {
	margin-top: 2em;
	font-size: 16pt;
	font-family: monospace;
	}
	#nodes {
	top: 0px;
	left: 700px;
	float: right;
	position: absolute;
	}
	.T {
	background: #bbeeff;
	color: #446688;
	position: absolute;
	width: 2em;
	top: -1.5em;
	left: 50%;
	margin-left: -1em;
	text-align: center;
	font-size: 8pt;
	border: solid 1px #446688;
	visibility: hidden;
	}
	.SB {
	border-bottom: solid 1px #ff4444;
	border-left: solid 1px #ff4444;
	border-right: solid 1px #ff4444;
	// TODO: height: 0.5em;
	}
	</style>
	<script src="d3.min.js"></script>
	</head>
	<body>
	<div id="canvas"></div>
	<div id="spanbox" style='float:left; position:absolute; top:2em; left:2em'>

	<div id="content">
	<span class="SB" id="sb1"><span class="sbstart" id="sb1start"></span><span style="position: relative" id="mary1"><span class="T">NN</span>Mary</span> had a lamb.<span id="sb1end"></span></span> <span class="SB" id="sp2"><span id="sb2start"></span>Mary ate the lamb.<span id="sb2end"></span></span> <span class="SB" id="sb3"><span id="sb3start"></span>Mary rejoiced.<span id="sb3end"></span></span>
	</div>

	<div id="nodes">
	<div id="people">People:
	<span class="person" id="mary" ids="mary1">Mary</span>
	</div>
	</div>

	</div>
	</body>
	<script type="application/x-javascript">

	// after http://stackoverflow.com/a/623770/424978

	function generateNodeSet() {
	var spans = document.getElementsByTagName("span");
	var retarr = [];
	for (var i=0;i<spans.length; i++) {
	retarr[retarr.length] = spans[i].id;
	}
	return retarr;
	}

	function generateLinks(nodeIds) {
	var retarr = [];
	for(var i=0; i<nodeIds.length; i++) {
	var id = nodeIds[i];
	var span = document.getElementById(id);
	if (!span) continue;
	var atts = span.attributes;
	var ids_str = false;
	if((atts.getNamedItem) && (atts.getNamedItem('ids'))) {
	ids_str = atts.getNamedItem('ids').value;
	}
	if(ids_str) {
	retarr[id] = ids_str.split(" ");
	}
	}
	return retarr;
	}

	function drawArrow(graph, fromelem, toelem) {
	var canvasdiv = document.getElementById("canvas");
	var spanboxdiv = document.getElementById("spanbox");
	var nodesdiv = document.getElementById("nodes");
	var contentdiv = document.getElementById("content");
	var canvasTop = canvasdiv.offsetTop - spanboxdiv.offsetTop;

	var x1 = fromelem.offsetLeft + spanboxdiv.offsetLeft + nodesdiv.offsetLeft - canvasdiv.offsetLeft;
	var x2 = toelem.offsetLeft + toelem.offsetWidth + spanboxdiv.offsetLeft + contentdiv.offsetLeft - canvasdiv.offsetLeft;
	var y1 = fromelem.offsetTop + fromelem.offsetHeight - canvasTop;
	var y2 = toelem.offsetTop + toelem.offsetHeight - canvasTop;
	graph.append("svg:line")
	.attr("x1", x1)
	.attr("y1", y1)
	.attr("x2", x2)
	.attr("y2", y2)
	.style("stroke", "rgb(0,180,0)");
	}

	var canvasTop = 0;

	function draw() {
	nodeset = generateNodeSet();
	linkset = generateLinks(nodeset);

	var lineGraph = d3.select("#canvas")
	.append("svg:svg")
	.attr("width", 1000)
	.attr("height", 1000);

	for(var key in linkset) {
	for (var i=0; i<linkset[key].length; i++) {
	fromid = key;
	toid = linkset[key][i];
	drawArrow(lineGraph,document.getElementById(fromid),document.getElementById(toid));
	}
	}
	}

	function drawLink(graph, x1, y1, x2, y2) {
	}

	function undraw() {
	d3.selectAll(document.getElementById("canvas").childNodes).remove()
	}

	document.getElementById("mary").onmouseover = draw;
	document.getElementById("mary").onmouseout = undraw

	</script>
	</html>