[separate SVG boxes ] Update speed based on number of SVG elements in viewBox

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.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 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">

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")

circles=svg_2.append("svg:g").selectAll("circle")

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
    }

circles = circles.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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js