d3 interaction example

demo1.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>

<div class="container">
	<div class="row">
		<h1>This is a page</h1>
		<div class="col-md-6" id="left">
			<h3>Input</h3>
		</div>
		<div class="col-md-6" id="right">
			<h3>Output</h3>
		</div>
	</div>
</div>

<script>
var left = d3.select('#left')
	.append("svg")
	.attr("width", 400)
	.attr("height", 400);

var right = d3.select('#right')
	.append("svg")
	.attr("width", 400)
	.attr("height", 400);

var right_rect = right.append("rect")
	.attr("x", 50)
	.attr("y", 50)
	.attr("width", 20)
	.attr("height", 20)
	.style("fill", "pink");

var left_rect = left.append("rect")
	.attr("x", 10)
	.attr("y", 10)
	.attr("width", 300)
	.attr("height", 300)
	.style("fill", "lightgray")
	.on("mousemove", function(){
		var coords = d3.mouse(this)
		right_rect.attr("x", coords[0])
			.attr("y", coords[1]);
		console.log('the right bit should be moving now');
	});

</script>