Shuffles

shuffles modified from http://bost.ocks.org/mike/shuffle/ for my blog article

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>Naïve Suffle</title>
<header>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</header>
<script>
    var margin = {
        top: 0,
        right: 25,
        bottom: 0,
        left: 25
    },
    width = 500,
        height = 80 - margin.top - margin.bottom,
        size = height * .4;

    var n = 60;

    var x = d3.scale.ordinal()
        .domain(d3.range(n))
        .rangePoints([0, width]);

    var y = d3.scale.linear()
        .domain([0, n - 1])
        .range([-Math.PI / 4, Math.PI / 4]);

    function chart(update) {
        var m = 60;

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("margin-left", margin.left + "px")
            .style("margin-right", margin.right + "px")
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var line = svg.selectAll("line")
            .data(d3.range(n))
            .enter().append("line")
            .attr("x2", function(d) {
            return size * Math.sin(y(d));
        })
            .attr("y2", function(d) {
            return -size * Math.cos(y(d));
        })
            .attr("transform", function(d, i) {
            return "translate(" + x(i) + "," + height + ")";
        })
            .style("stroke", "#666");

        var play = svg.append("g")
            .attr("class", "play")
            .on("click", start);

        play.append("path")
            .attr("d", "M-30,-30L30,0L-30,30Z")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.6)");

        play.append("rect")
            .attr("width", width)
            .attr("height", height);

        function start() {
            play.style("display", "none");
            var interval = setInterval(function() {
                if (!(m = update(line,...

CSS

@import url(../style.css?20120427);
 line {
    stroke: #000;
    stroke-width: 1.5px;
}
line.conflict {
    stroke: red !important;
    stroke-width: 4px !important;
}
.play path {
    stroke: #fff;
    stroke-width: 6px;
}
.play:hover path {
    fill: red;
}
.play rect {
    fill: none;
    pointer-events: all;
    cursor: pointer;
}