Two Dimensional Data for Rects

_.md

[ Launch: Two Dimensional Data for Rects ] 11096344 by ljbrown238
[ Launch: Two Dimensional Data for Rects ] 11096314 by ljbrown238
[ Launch: Two Dimensional Data for Rects ] 11091282 by ljbrown238

config.json

{"description":"Two Dimensional Data for Rects","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/iRIv5ae.gif"}

inlet.js

    // This demo shows how to take a two dimensional matrix and display it as a heatmap

	// Get a handle to the Scalable Vector Graphics canvas
	var svg = d3.select("svg")

    
    // Create a color heatmap scale
    var colorScale = d3.scale.linear()
            .domain([0,50,100])
            .range(["#93ffa2","#00ff22","#3bd100"])	// <<< click on the colors to modify color range

    
    // Create a random two dimensional matrix
    var matrix = [];
    var dim = 50;
    for (i=0;i<dim;i++) {
      matrix[i] = [];
      for (j=0;j<dim;j++) {
        matrix[i].push(Math.floor(Math.random() * 100));
      }
    }

	// Click on THESE numbers below to modify how the matrix looks
	var margin_top = 53;
	var margin_left = 56;
    var rect_width = 5;
    var rect_height = 5;
	var gap_height = rect_height + 0;
	var gap_width = rect_width + 0;

	// Here is where to paint the matrix
    svg.selectAll("recta")
            .data(matrix)
            .enter()
            .append("g")
                .attr("myrow", function(d,i) { return i;})
				.attr("transform", function(d,i) {
					return "translate(" + margin_left + "," + (i * gap_height) + ")";
				})
                .selectAll("rectb")
                .data(function(d, i) { return d; }) // d is matrix[i]
                .enter()
                .append("rect")
                    .attr("x",function(d,i) { return (i * (gap_width));})
                    .attr("y",margin_top)
                    .attr("width",rect_width)
                    .attr("height",rect_height)
                    .attr("mydata",function(d,i) { return d;})
                    .attr("fill", function(d,i) { return colorScale(d);});