scotthmurray/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>SVG Resize Test</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: #50BCE8;
			}

			p {
				font-family: sans-serif;
				font-size: 12px;
			}

			svg {
				background-color: white;
				cursor: pointer;
			}

			svg:hover {
				background-color: #FEED18;
			}

			rect {
				fill: #D50700;
			}

			/* 	Color palette courtesy of COLOURlovers:
				http://www.colourlovers.com/palette/3583451/Tirepalos	*/

		</style>
	</head>
	<body>

		<p>Click to trigger a resize transition.</p>

		<script type="text/javascript">

			var w = 600;
			var h = 300;
			var minWidth = 100;
			var maxWidth = 800;
			var minHeight = 100;
			var maxHeight = 400;
			var padding = 50;
			var minPadding = Math.min( minWidth * 0.1, minHeight * 0.1 );

			//Create the initial SVG
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			//Create the initial rectangle
			var rect = svg.append("rect")
							.attr("x", padding)
							.attr("y", padding)
							.attr("width", w - padding * 2)
							.attr("height", h - padding * 2);

			//When clicked, trigger a new resize transition
			svg.on("click", function() {

				//New, random w, h, and padding
				w = Math.round( minWidth + Math.random() * (maxWidth - minWidth) );
				h = Math.round( minHeight + Math.random() * (maxHeight - minHeight) );
				var maxPadding = Math.min( w * 0.4, h * 0.4 );
				padding = Math.round( Math.max( minPadding, Math.random() * maxPadding ) );

				//Transition SVG and rect into new dimensions
				svg.transition()
					.duration(2000)
					.attr("width", w)
					.attr("height", h);

				rect.transition()
					.duration(2000)
					.attr("x", padding)
					.attr("y", padding)
					.attr("width", w - padding * 2)
					.attr("height", h - padding * 2);

			});


		</script>

	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>SVG Resize Test</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #50BCE8;
	}

	p {
	font-family: sans-serif;
	font-size: 12px;
	}

	svg {
	background-color: white;
	cursor: pointer;
	}

	svg:hover {
	background-color: #FEED18;
	}

	rect {
	fill: #D50700;
	}

	/* Color palette courtesy of COLOURlovers:
	http://www.colourlovers.com/palette/3583451/Tirepalos */

	</style>
	</head>
	<body>

	<p>Click to trigger a resize transition.</p>

	<script type="text/javascript">

	var w = 600;
	var h = 300;
	var minWidth = 100;
	var maxWidth = 800;
	var minHeight = 100;
	var maxHeight = 400;
	var padding = 50;
	var minPadding = Math.min( minWidth * 0.1, minHeight * 0.1 );

	//Create the initial SVG
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Create the initial rectangle
	var rect = svg.append("rect")
	.attr("x", padding)
	.attr("y", padding)
	.attr("width", w - padding * 2)
	.attr("height", h - padding * 2);

	//When clicked, trigger a new resize transition
	svg.on("click", function() {

	//New, random w, h, and padding
	w = Math.round( minWidth + Math.random() * (maxWidth - minWidth) );
	h = Math.round( minHeight + Math.random() * (maxHeight - minHeight) );
	var maxPadding = Math.min( w * 0.4, h * 0.4 );
	padding = Math.round( Math.max( minPadding, Math.random() * maxPadding ) );

	//Transition SVG and rect into new dimensions
	svg.transition()
	.duration(2000)
	.attr("width", w)
	.attr("height", h);

	rect.transition()
	.duration(2000)
	.attr("x", padding)
	.attr("y", padding)
	.attr("width", w - padding * 2)
	.attr("height", h - padding * 2);

	});


	</script>

	</body>
	</html>