ZJONSSON/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<STYLE>svg { border: dashed;border-width:1px;}</STYLE>
</head>

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

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

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

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

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

    points=svg_2.append("svg:g").append("svg:path")

    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() {
        data = [],
            count = size/(Math.sqrt(d3.select("#num_points").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,cy:cy+dy})
            }
        }
        console.log("data ready")
        points.data([data]).attr("d",d3.svg.line()
            .x(function(d) { return d.cx; })
            .y(function(d) { return d.cy; }));
    }


    last = new Date()
    updateCircles()
    setInterval(updateBox,0)
    d3.select("#inside").on("change",updateCircles)
    d3.select("#num_points").on("change",updateCircles)
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<STYLE>svg { border: dashed;border-width:1px;}</STYLE>
	</head>

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

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

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

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

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

	points=svg_2.append("svg:g").append("svg:path")

	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() {
	data = [],
	count = size/(Math.sqrt(d3.select("#num_points").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,cy:cy+dy})
	}
	}
	console.log("data ready")
	points.data([data]).attr("d",d3.svg.line()
	.x(function(d) { return d.cx; })
	.y(function(d) { return d.cy; }));
	}


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