D3 Examples - D3 for layout management

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
xxxxxxxxxx
 
<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)
        }
    });
​
    var cards = g.selectAll("g.card").data(lineLt.points(DATA));
    cards
        .enter()
        .append("svg:g")
            .attr("class", "card")
            .attr("transform", function(d, i) { return d.transform; } )
        .append("svg:rect")
            .attr("width", 30)
            .attr("height", 30 * 1.618)
            .attr("rx", 3)
            .attr("ry", 3)
            .attr("stroke", function(d, i) {
            return d3.hsl((180.0 + hue(i)) % 360.0, 1, 0.5);
            })
            .style("fill", function(d, i) { return d3.hsl(hue(i), 1, 0.75); })
            .attr("transform", "translate(-15 0)")
    cards
        .append("text")
        .attr("y", 17)
        .attr("x", -12)
        .text(function(d, i) { return "" + d.text; })
        .style("fill", function(d, i) { return d.color; });
​
    // ------------------
    //   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) });
​
    function applyLayout(cards, layout, duration) {
        if(parseInt(duration, 10) !== duration) { duration = 1000; }
        var data = d3.range(cards[0].length).map(function(d, i) { return {}; })
        var pts = layout(data);
        cards
            .transition().duration(duration)
            .attr("transform", function(d, i) { return pts[i].transform }); // where i is the index
        return false;
    }
​
​
    // ------------------
    //   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>
​
    