D3 for layout management

Derived from the skew demo - http://calroc.github.com/aum-gravity/, made available in the aum-gravity github project - https://github.com/calroc/aum-gravity. The layout functionality was isolated and moved to separate files that are written as d3.layout plugins.

Interactive version on bl.ocks - /widged/4547392

<html>
<head>
<title>D3 for layout management</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">
	<svg id="kitchensink" width="1500" height="480" viewBox="0 0 1500 480" perserveAspectRatio="xMidYMid"></svg>
	<div id="controls">
		<button id="line-opt">line</button>
		<button id="circle-opt">circle</button>
		<button id="triangle-opt">triangle</button>
		<button id="random-opt">random</button>
	</div>
</div>
<script src="d3.layout.circle.js"></script>
<script src="d3.layout.line.js"></script>
<script src="d3.layout.triangle.js"></script>
<script src="d3.layout.randomspread.js"></script>
<script>

var width = 1500, height = 480, cardQty = 20;
	var g = svgDisplay(width, height);

var hue = d3.scale.linear().domain([0, cardQty]).range([0.0, 360.0]);

var lineLt     = d3.layout.line().width(800).offsetX((width-800)/2).offsetY((height-30)/2);
	var circleLt   = d3.layout.circle().center(width/2, height/2).radius(133);
	var triangleLt = d3.layout.triangle().width(400).height(300).offsetX((width-400)/2).offsetY((height-300)/2);
	var randomLt   = d3.layout.randomspread().width(width - 80).height(height - 80).offsetX(80/2).offsetY((80-30)/2);

var DATA = d3.range(cardQty).map(function (d) {
		return {
			text: d+1, 
			color: d3.hsl((180.0 + hue(d)) % 360.0, 1, 0.5)
		}
	});

// ------------------
	//   Layout Demos
	// ------------------

$("#line-opt").click(function(event)     { applyLayout(cards, lineLt) });
	$("#circle-opt").click(function(event)   { applyLayout(cards, circleLt) });
	$("#triangle-opt").click(function(event) { applyLayout(cards, triangleLt) });
	$("#random-opt").click(function(event)   { applyLayout(cards, randomLt) });

// ------------------
	//   Utils
	// ------------------

function svgDisplay(width, height) {
		var $svg = $("#kitchensink");
		var aspect = $svg.width() / $svg.height();
		$(window).on("resize", function() {
			var targetWidth = $("#container").width();
			$svg.attr("width", targetWidth);
			$svg.attr("height", Math.round(targetWidth / aspect));
		}).trigger("resize");

var svg = d3.select("svg");
		var g = svg.append("svg:g");
		g.append("svg:rect")
			.attr("class", "fram")
			.attr("width", width)
			.attr("height", height);
		return g;	
	}

</script>

<p>Credits: derived from the <a href="https://calroc.github.com/aum-gravity/">skew demo</a> in the <a href="https://github.com/calroc/aum-gravity">aum-gravity github project</a></p>
</body>
</html>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js