$(document).ready(function(){
    var div = $('<div id="viz"></div>')
        .css("width", "100%")
        .css("height", "100%")
        .css("z-index", -1)
        .css("position", "fixed")
        .css("top", 0)
        .css("left", 0);

    $("body").append(div);

    var width=1000,
        height=1000,
        xcount=30,
        ycount=30,
        cellw=width/xcount,
        cellh=height/ycount;

    var xscale = d3.scale.linear()
        .domain([0, xcount])
        .range([0, width]);

    var yscale = d3.scale.linear()
        .domain([0, ycount])
        .range([0, height]);

    var svg = d3.select("#viz").append("svg")
        .attr("id", "svg")
        .attr("height", "100%")
        .attr("width", "100%")
        .attr("preserveAspectRatio", "xMinYMin slice")
        .attr("viewBox", "0 0 " + width + " " + height);

    var color = d3.scale.category20c();

    function update(data) {
        // join
        // join data with old elements, if any:
        var circles = svg.selectAll("circle")
            .data(data)
            .on("mouseover", function(d) {
                d3.select(this).transition()
                    .duration(250)
                    .attr("r", function(d, i) { return 1; });
                    // .style("fill", function(d, i) { return color(d); });
            });

        // update
        // update old elements as needed:
        circles.transition()
            .duration(750)
            .attr("r", function(d, i) { return d })
            .style("fill", function(d, i) {
                return color(d);
            });

        // enter
        // create new elements:
        circles.enter().append("circle")
            .attr("cx", function(d, i) { return xscale( i % xcount ) - 1; })
            .attr("cy", function(d, i) { return yscale( Math.floor(i / xcount) ); })
            .attr("r", function(d, i) { return d; })
            .style("fill", function(d, i) { return color(d); });

        circles.exit()
            .remove();
    }

    function random_data() {
        data = [];
        for ( i = 0; i < xcount * ycount; i++ ) {
            data.push( Math.floor( Math.random() * (cellw/2) ) );
        }
        return data;
    }

    update( random_data() );

    setInterval(function(){
        update( random_data() );
    }, 1500);
});