demo4

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>Chart</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 create_data = function(mu, sigma, n){
	var rf = d3.random.normal(mu, sigma);
	return d3.range(100).map(function(d){
		return [rf(), rf(), Math.random() * 8]
	});
}

var draw_circles = function(mu, sigma, n){
	d3.selectAll("circle").remove();
	right.selectAll("circle")
		.data(create_data(mu, sigma, n))
		.enter()
		.append("circle")
		.attr("cx", function (d) { return d[0]; })
		.attr("cy", function (d) { return d[1]; })
		.attr("r", function (d) { return d[2]; })
		.attr("stroke", "white")
		.style("fill", function(d) { return 'steelblue'; });
}

draw_circles(10, 10, 200);

var right_rect = right.append("rect")
	.attr("x", 10)
	.attr("y", 10)
	.attr("width", 300)
	.attr("height", 300)
	.style("fill", "pink")
	.style("opacity", 0.2);

var left_rect = left.append("rect")
	.attr("x", 10)
	.attr("y", 10)
	.attr("width", 300)
	.attr("height", 300)
	.style("fill", "lightgray")
	.on("mousemove", function(){
		d3.selectAll("circle").remove();
		var d = d3.mouse(this); 
		mu = d[0];
		sigma = (300 - d[1])/10;
		draw_circles(mu, sigma);
	});

</script>