var container = d3.select('#holder');

var svg = container.append("svg").attr("width", 1000).attr("height", 1000);

​

// svg.append("circle")

// .attr("cx", 200)

// .attr("cy", 200)

// .attr("r", 50);

​

​

var x = 0;

var y = 0;

​

var pathString = '';

​

var x1, x2, x3, x4;

var y1, y2, y3, y4;

​

var flip = true;

​

for (var j = 0; j < 30; j++) {

  for (var i = 0; i < 30; i++) {

  x1 = x + 0;

  y1 = y + 15;

  x2 = x + 5;

  y2 = y + 0;

  x3 = x + 10;

  y3 = y + 15;

  x4 = x + 5;

  y4 = y + 30;

  x = x + 10;

  pathString = 'M ' + x1 + ',' + y1 + " L " + x2 + "," + y2 + " L " + x3 + "," + y3 + " L " + x4 + "," + y4 + " Z";

    if (Math.random() > 0.9) {

              svg.append("path")

    .style("fill", "#5AF")

              .attr("stroke", "none")

    .attr("d", pathString);

    }

    else if (Math.random() > 0.5) {

                    svg.append("path")

    .style("fill", "#246")

              .attr("stroke", "none")

    .attr("d", pathString);

    }

    else {

        svg.append("path")

    .style("fill", "#369")

        .attr("stroke", "none")

    .attr("d", pathString);

    }

  }

  y = y + 30;

  x = 0;

}

​

x = 5;

y = 15;

​

for (var j = 0; j < 30; j++) {

  for (var i = 0; i < 30; i++) {

  x1 = x + 0;

  y1 = y + 15;

  x2 = x + 5;

  y2 = y + 0;

  x3 = x + 10;

  y3 = y + 15;

  x4 = x + 5;

  y4 = y + 30;

  x = x + 10;

  pathString = 'M ' + x1 + ',' + y1 + " L " + x2 + "," + y2 + " L " + x3 + "," + y3 + " L " + x4 + "," + y4 + " Z";

    if (Math.random() > 0.9) {

              svg.append("path")

    .style("fill", "#5AF")

              .attr("stroke", "none")

    .attr("d", pathString);

    }

    else if (Math.random() > 0.5) {

                    svg.append("path")

    .style("fill", "#246")

              .attr("stroke", "none")

    .attr("d", pathString);

    }

    else {

        svg.append("path")

    .style("fill", "#369")

        .attr("stroke", "none")

    .attr("d", pathString);

    }

    flip = !flip;

​

  }

  y = y + 30;

  x = 5;

}

​

​

​

// .attr("x1",0).attr("y1",15)

// .attr("x2",5).attr("y2",0)

// .attr("x3",10).attr("y3",15)

// .attr("x4",5).attr("y4",30)

// .attr("stroke-width", 2)

// .attr("stroke", "black");

​

​

​

$("svg").html($("svg").html()); //convince the browser that there's some svgs goin' down

​

​