SVG Resize Test

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>SVG Resize Test</title>
		<script type="text/javascript" src="https://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:
				https://www.colourlovers.com/palette/3583451/Tirepalos	*/

</style>
	</head>
	<body>

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

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js