Tributary inlet

_.md

[ Launch: Tributary inlet ] 6042862 by trinary

config.json

{"description":"Tributary inlet","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

        var cols = [
            "Time1",
            "Time2",
            "Time3",
            "Time4"
        ];


        var rows = [
            "LAB1",
            "LAB2",
            "LAB3",
            "LAB4"
        ];
var newdata = {
        "rows": 4,
        "columns": 4,

        "data": [
            {
                "col": "Time1",
                "row": "LAB1",
                "value": 9.996284
            },
            {
                "col": "Time2",
                "row": "LAB1",
                "value":9.408937
            },
            {
                "col": "Time3",
                "row": "LAB1",
                "value":10.389239
            },
            {
                "col": "Time4",
                "row": "LAB1",
                "value":10.129356
            },
            {
                "col": "Time1",
                "row": "LAB2",
                "value":10.094622
            },
            {
                "col": "Time2",
                "row": "LAB2",
                "value":9.476514
            },
            {
                "col": "Time3",
                "row": "LAB2",
                "value":9.433171
            },
            {
                "col": "Time4",
                "row": "LAB2",
                "value":9.808435
            },
            {
                "col": "Time1",
                "row": "LAB3",
                "value":10.051977
            },
            {
                "col": "Time2",
                "row": "LAB3",
                "value":9.860412
            },
            {
                "col": "Time3",
                "row": "LAB3",
                "value":9.63794
            },
            {
                "col": "Time4",
                "row": "LAB3",
                "value":9.584786
            },
            {
                "col": "Time1",
                "row": "LAB4",
                "value":10.227904
            },
            {
                "col": "Time2",
                "row": "LAB4",
                "value":9.893508
            },
            {
                "col": "Time3",
                "row": "LAB4",
                "value":9.769497
            },
            {
                "col": "Time4",
                "row": "LAB4",
                "value":9.640829
            }
        ]
    }

				var visparams = {
					width : 744,
					height : 616,
					columnlabelgutter : 80,
					rowlabelgutter : 80
				};
				
				var vis = d3.select("svg")
					.attr("width", visparams.width )
					.attr("height", visparams.height);

				vis.selectAll('*').remove();
				
				if (!newdata) {
					return;
				}
				    
				var values = newdata.data.map(function(x){return x.value});
				
				var cellXPosition = d3.scale.ordinal()
						.domain(cols)
						.rangeRoundBands([visparams.rowlabelgutter, visparams.width]);
								
				var cellYPosition = d3.scale.ordinal()
						.domain(rows)
						.rangeRoundBands([visparams.columnlabelgutter, visparams.height]);
console.log(cellXPosition.domain(), cellYPosition.domain());

				var squares = vis.selectAll("rect")
						.data(newdata.data)
						.enter()
						.append("rect")
						.attr({
							"height": function(d){
								return 0.98 * (cellYPosition(rows[1]) - cellYPosition(rows[0]));
								//return 20;
							},
							"width": function(d){
								return 0.98 * (cellXPosition(cols[1]) - cellXPosition(cols[0]));
								//return 20;
							},
							"x": function(d, i) { return cellXPosition(d.col); },
							"y": function(d, i) { return cellYPosition(d.row); },
							"fill": function(d) {
								//return "rgb(" + scope.redColorControl(d.value, scope.inputcolor) + "," + scope.greenColorControl(d.value, scope.inputcolor) + ","+ scope.blueColorControl(d.value, scope.inputcolor)+")";
								return "red"
							},
							"value": function(d) { return d.value; },
							"index": function(d, i) { return i; },
							"row": function(d, i) { return d.row; },
							"column": function(d, i) { return d.col; }
						})
						.on('mouseover', function(d) {
							vis.append("text")
								.attr({
									"id": "tooltip",
									"x": cellXPosition(d.col),
									"y": cellYPosition(d.row) + 40
								})
								.text(d.row + " " + d.col);
						})
						.on('mouseout', function() { d3.select('#tooltip').remove(); });
						
				var xAxis = d3.svg.axis().scale(cellXPosition).orient("bottom");
				var yAxis = d3.svg.axis().scale(cellYPosition).orient("left");
				
				vis.append('g').attr("transform", "translate(0,"+ (visparams.rowlabelgutter - 20) +")").call(xAxis);
				vis.append('g').attr("transform", "translate(" + (visparams.columnlabelgutter) +",0)").call(yAxis);