puzzler10/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of how to change the attributes of a SVG element through a HTML input. It is not fully bug tested - near the edges of the graph, the rectangle can get "stuck".
See http://www.puzzlr.org/ for more d3 related fun!

  
## index.html

<!DOCTYPE html>
<html>
 <head>
<style>

 </style>
 </head>

 <body>
x <input type = "range" min = "5" max = "500"  value = "5" id = "xvalue" > <br>
y <input type = "range" min = "5" max = "500"  value = "5" id = "yvalue" ><br>
width <input type = "range" min = "5" max = "500"  value = "5" id = "recwidth" ><br>
height <input type = "range" min = "5" max = "500"  value = "5" id = "recheight" >


<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script>
// A program that moves around a rectangle using sliders

//starting values of rectangle
var x = 10
var y = 10
var width = 30
var height = 50

var temp;

var svg_width = 960
var svg_height = 500
var padding = 5

var svg = d3.select("body").append("svg")
			.attr("width", svg_width)
			.attr("height", svg_height);


svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("x", x)
.attr("y", y)
.style("fill", "none")
.style("stroke","black");

//change the x-value
d3.select("#xvalue").on("input", function() {
  update(+this.value, "x");
});


//change the y-value
d3.select("#yvalue").on("input", function() {
  update(+this.value, "y");
});

//change the width
d3.select("#recwidth").on("input", function() {
  update(+this.value, "width");
});


//change the height
d3.select("#recheight").on("input", function() {
  update(+this.value, "height");
});


function update(value, which_type) {

	//make sure we don't go off the screen
	if (which_type == "x")
	{
		temp = svg_width - padding - +d3.select("rect").attr("x")
		updateMax(temp,"#recwidth")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("width")) > svg_width ) {

			//max value
			value = temp;
		}
	}
	if (which_type == "y")
	{
		temp = svg_height - padding - +d3.select("rect").attr("y")
		updateMax(temp,"#recheight")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("height")) > svg_height ) {
			value = temp;
		}
	}
	if (which_type == "width")
	{
		temp = svg_width - padding - +d3.select("rect").attr("width")
		updateMax(temp,"#xvalue")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("x")) > svg_width ) {
			value = temp;
		}
	}
	if (which_type == "height")
	{
		temp = svg_height - padding - +d3.select("rect").attr("height")
		updateMax(temp,"#yvalue")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("y")) > svg_height ) {
			value = temp;
		}
	}

	d3.select("rect")
	.attr(which_type, value);

}

function updateMax(max,id) {
	d3.select("body").select(id).attr("max",max)
}

</script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<style>

	</style>
	</head>

	<body>
	x <input type = "range" min = "5" max = "500" value = "5" id = "xvalue" > <br>
	y <input type = "range" min = "5" max = "500" value = "5" id = "yvalue" ><br>
	width <input type = "range" min = "5" max = "500" value = "5" id = "recwidth" ><br>
	height <input type = "range" min = "5" max = "500" value = "5" id = "recheight" >




	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script>
	// A program that moves around a rectangle using sliders

	//starting values of rectangle
	var x = 10
	var y = 10
	var width = 30
	var height = 50

	var temp;

	var svg_width = 960
	var svg_height = 500
	var padding = 5

	var svg = d3.select("body").append("svg")
	.attr("width", svg_width)
	.attr("height", svg_height);



	svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.attr("x", x)
	.attr("y", y)
	.style("fill", "none")
	.style("stroke","black");

	//change the x-value
	d3.select("#xvalue").on("input", function() {
	update(+this.value, "x");
	});


	//change the y-value
	d3.select("#yvalue").on("input", function() {
	update(+this.value, "y");
	});

	//change the width
	d3.select("#recwidth").on("input", function() {
	update(+this.value, "width");
	});


	//change the height
	d3.select("#recheight").on("input", function() {
	update(+this.value, "height");
	});


	function update(value, which_type) {

	//make sure we don't go off the screen
	if (which_type == "x")
	{
	temp = svg_width - padding - +d3.select("rect").attr("x")
	updateMax(temp,"#recwidth")
	if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("width")) > svg_width ) {

	//max value
	value = temp;
	}
	}
	if (which_type == "y")
	{
	temp = svg_height - padding - +d3.select("rect").attr("y")
	updateMax(temp,"#recheight")
	if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("height")) > svg_height ) {
	value = temp;
	}
	}
	if (which_type == "width")
	{
	temp = svg_width - padding - +d3.select("rect").attr("width")
	updateMax(temp,"#xvalue")
	if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("x")) > svg_width ) {
	value = temp;
	}
	}
	if (which_type == "height")
	{
	temp = svg_height - padding - +d3.select("rect").attr("height")
	updateMax(temp,"#yvalue")
	if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("y")) > svg_height ) {
	value = temp;
	}
	}

	d3.select("rect")
	.attr(which_type, value);

	}

	function updateMax(max,id) {
	d3.select("body").select(id).attr("max",max)
	}

	</script>
	</body>
	</html>