demo2

index.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 data = []

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", 10)
	.attr("y", 10)
	.attr("width", 300)
	.attr("height", 300)
	.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);

		var circle = right.append("circle")
			.attr("cx", function (d) { return coords[0]; })
			.attr("cy", function (d) { return coords[1]; })
			.attr("r", function (d) { return 5; })
			.style("fill", function(d) { return 'steelblue'; });
		});

</script>