nachocab/gist:3013836

## gistfile1.html
<!DOCTYPE html>
     <html>
     <head>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
     </head>
     <body>
         <script type="text/javascript">
            var data = [-1,0,1]

            var rect_size = 25; //px

            var x = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, rect_size*data.length]);
            var color = d3.scale.linear().domain([-1.5, 0, 1.5]).range(["#278DD6","#ffffff","#d62728"]).clamp(false);

            var svg = d3.select("body").append("svg")
                .attr("width", 800)
                .attr("height", 200)

            scale = svg.selectAll("rect")
                .data(data)
              .enter().append("rect")
                .attr("x", function(d,i) { return x(i); })
                .attr("y",0)
                .attr("width", rect_size)
                .attr("height", rect_size)
                .style("fill", function(d) { return color(d); });

            dots = [[1,2,3],[1,2],[1,2,3,4]]
            var y = d3.scale.ordinal().domain(d3.range(dots.length)).rangeBands([0, (rect_size/2)*dots.length]);
            scale.selectAll("g")
                .data(dots, function(d){return d;})
              .enter().append("rect")
                .attr("x", function(d,i) {return x(i);})
                .attr("y", function(d,i) {return y(i);})
                .attr("width", rect_size/2)
                .attr("height", rect_size/2)
                .style("fill", "black");
         </script>
     </body>
     </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	var data = [-1,0,1]

	var rect_size = 25; //px

	var x = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, rect_size*data.length]);
	var color = d3.scale.linear().domain([-1.5, 0, 1.5]).range(["#278DD6","#ffffff","#d62728"]).clamp(false);

	var svg = d3.select("body").append("svg")
	.attr("width", 800)
	.attr("height", 200)

	scale = svg.selectAll("rect")
	.data(data)
	.enter().append("rect")
	.attr("x", function(d,i) { return x(i); })
	.attr("y",0)
	.attr("width", rect_size)
	.attr("height", rect_size)
	.style("fill", function(d) { return color(d); });

	dots = [[1,2,3],[1,2],[1,2,3,4]]
	var y = d3.scale.ordinal().domain(d3.range(dots.length)).rangeBands([0, (rect_size/2)*dots.length]);
	scale.selectAll("g")
	.data(dots, function(d){return d;})
	.enter().append("rect")
	.attr("x", function(d,i) {return x(i);})
	.attr("y", function(d,i) {return y(i);})
	.attr("width", rect_size/2)
	.attr("height", rect_size/2)
	.style("fill", "black");
	</script>
	</body>
	</html>