A slightly adopted version using SVG. A form to control radius of randomly drawn circles.
<!DOCTYPE html>
<html>
<head>
<title>Hello, data!</title>
<script type="text/javascript" src="lib/d3.js"></script>
</head>
<body>
<form name="myform" onSubmit="return handleClick()">
<input name="Submit" type="submit" value="Radius" />
<input type="text" id="myRadius"/>
</form>
<div id="viz"></div>
<script type="text/javascript">
var mySVG = d3.select("#viz")
.append("svg:svg")
.attr("width", 600)
.attr("height", 400);
function handleClick(event){
console.log(document.getElementById("myRadius").value)
draw(document.getElementById("myRadius").value)
return false;
}
function draw(rad){
mySVG.append("svg:circle")
.style("stroke", "black")
.style("fill", "grey")
.attr("r", rad)
.attr("cx", Math.round(Math.random()*600))
.attr("cy", Math.round(Math.random()*400))
}
</script>
</body>
</html>
SVG circles
