ZJONSSON/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>

<body>
    <div id="graph"></div>
    <div id="fps">FPS: <SPAN>?</SPAN></DIV>
    Number or circles
    <select id="num_circles">
        <option value="500">500</option>
        <option value="1000">1000</option>
        <option value="5000">5000</option>
        <option value="10000">10000</option>
    </select>
<br>
Inside viewbox: <input type="checkbox" id="inside" checked="checked">

<script type="text/javascript">
    var size=300,
        dx=5;

    svg = d3.select("#graph")
        .append("svg:svg")
        .attr("height",size)
        .attr("width",size*2)

    rect = svg.append("svg:rect")
        .attr("x",size/4+dx)
        .attr("y",size/4)
        .attr("height",size/4)
        .attr("width",size/4)
        .style("fill","red")

    function updateBox() {
        dx =-dx;
        //rect.attr("x",size/4+dx)
        rect[0][0].setAttribute("x",size/4+dx)
        latest = new Date()
        d3.select("#fps span").text(1/(latest-last)*1000)
        last=latest
    }

    function updateCircles() {
        var data = [],
            count = size/(Math.sqrt(d3.select("#num_circles").property("value"))),
            dy = d3.select("#inside").property("checked") ? 0 : 500;

        for (cx=0;cx<=size;cx+=count) {
           for (cy=0;cy<=size;cy+=count) {
                data.push({cx:cx+size,cy:cy+dy})
            }
        }
       console.log("data ready")

        circles = svg.selectAll("circle").data(data)
        circles.exit().remove()
        circles.enter().append("svg:circle").attr("r",1).style("fill","green")
        circles.attr("cx",function(d) { return d.cx}).attr("cy",function(d) { return d.cy})
    }


    last = new Date()
    updateCircles()
    setInterval(updateBox,0)
    d3.select("#inside").on("change",updateCircles)
    d3.select("#num_circles").on("change",updateCircles)
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>

	<body>
	<div id="graph"></div>
	<div id="fps">FPS: <SPAN>?</SPAN></DIV>
	Number or circles
	<select id="num_circles">
	<option value="500">500</option>
	<option value="1000">1000</option>
	<option value="5000">5000</option>
	<option value="10000">10000</option>
	</select>
	<br>
	Inside viewbox: <input type="checkbox" id="inside" checked="checked">

	<script type="text/javascript">
	var size=300,
	dx=5;

	svg = d3.select("#graph")
	.append("svg:svg")
	.attr("height",size)
	.attr("width",size*2)

	rect = svg.append("svg:rect")
	.attr("x",size/4+dx)
	.attr("y",size/4)
	.attr("height",size/4)
	.attr("width",size/4)
	.style("fill","red")

	function updateBox() {
	dx =-dx;
	//rect.attr("x",size/4+dx)
	rect[0][0].setAttribute("x",size/4+dx)
	latest = new Date()
	d3.select("#fps span").text(1/(latest-last)*1000)
	last=latest
	}

	function updateCircles() {
	var data = [],
	count = size/(Math.sqrt(d3.select("#num_circles").property("value"))),
	dy = d3.select("#inside").property("checked") ? 0 : 500;

	for (cx=0;cx<=size;cx+=count) {
	for (cy=0;cy<=size;cy+=count) {
	data.push({cx:cx+size,cy:cy+dy})
	}
	}
	console.log("data ready")

	circles = svg.selectAll("circle").data(data)
	circles.exit().remove()
	circles.enter().append("svg:circle").attr("r",1).style("fill","green")
	circles.attr("cx",function(d) { return d.cx}).attr("cy",function(d) { return d.cy})
	}


	last = new Date()
	updateCircles()
	setInterval(updateBox,0)
	d3.select("#inside").on("change",updateCircles)
	d3.select("#num_circles").on("change",updateCircles)
	</script>
	</body>
	</html>