Interactive association matrix

fullscreen

taendo

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

Interactive association matrix
jquery-1.7.1.min.js
jquery-ui-1.8.18.min.js
http://tk-venn2.appspot.com/js/tklib.js
http://tk-venn2.appspot.com/js/tkstat.js
http://tk-venn2.appspot.com/js/tkcluster.js
http://tk-venn2.appspot.com/js/tkcolor.js
http://tk-venn2.appspot.com/js/tktree.js

window.onresize = function() {
	repaint();
};

function apply_linkdata_table(LinkData) {
//	console.log(LinkData);

//	LinkData.getWorks();
    tkjs.controller.create_ui_components();
	console.log("LINKDATA is ");
    console.log(LinkData);
//    if (typeof LinkData === 'undefined') {
//	var LinkData = myLD;
 //   }
    var work = LinkData.getWorks();
    if (typeof work !== 'string') { work = work[0]; }
	console.log("workID:" + work);
    var file = LinkData.getFiles(work);
    if (typeof file !== 'string') {file = file[0]; }
	console.log("fileID:" + file);
    var prop = LinkData.getProperties(work, file);
    console.log(prop);
    var subj = LinkData.getSubjects(work, file);
    console.log(subj);
    var i, j;
	console.log(tkjs);
	console.log(tkjs.cluster);
	console.log(tkjs.cluster.TreeGenerator);
    var tree = new tkjs.cluster.TreeGenerator();
    var data = {};
    var x_, y_;
	var column_alias = [3, 4, 5, 6];
	if (prop[3].indexOf('+') >= 0 || prop[3].toLowerCase().indexOf('plus') >= 0) {
		column_alias = [6, 5, 4, 3];
    }
	
    for (i = 0; i < subj.length; i++) {
	var xelem = LinkData.getObjects(work, file, subj[i], prop[1]).toString();
	var yelem = LinkData.getObjects(work, file, subj[i], prop[2]).toString();
	var counts = [];
	for (j = 0; j < 4; j++) {
		var col_ = column_alias[j];
		var obj = LinkData.getObjects(work, file, subj[i], prop[col_]).toString();
	    counts.push(parseInt(obj, 10));
	}
	var lod_dist = 0;
	if (!data[xelem]) { data[xelem] = {}; }
	if (!data[yelem]) { data[yelem] = {}; }
	data[xelem][yelem] = data[yelem][xelem] = counts;
	if (counts[1] <= 0 || counts[2] <= 2) {
	    if (counts[0] > 0 && counts[3] > 0) {
		lod_dist = 100;
	    } else {
		lod_dist = -100;
	    }
	} else if (counts[0] <= 0 || counts[3] <= 0) {
	    lod_dist = 100;
	} else {
	    var odds = counts[0] * counts[3] / (counts[1] * counts[2]);
	    lod_dist = - Math.log(odds) / Math.log(2);
	}
	tree.set_distance(xelem, yelem, lod_dist);
    }
	console.log('clustering');
    tree.execute_clustering();
    var sorted = tree.get_labels();
    var table = [];
    //console.log(data);
    for (i = 0; i < sorted.length; i++) {
	for (j = 0; j < i; j++) {
	    //console.log(sorted[i] + " , " + sorted[j]);
	    table.push(data[sorted[i]][sorted[j]]);
	}
    }
    var n_ = sorted.length;
    var matrix = new tkjs.cluster.DataMatrix(n_ * (n_ - 1) / 2, table);
    tkjs.cluster.cluster = tree.tree;
    tkjs.cluster.matrix = matrix;//.counts;

tkjs.controller.set_viewer();
}

window.onload = function() {
	console.log(LinkData);
	console.log(LinkData.getWorks());
	apply_linkdata_table(LinkData);
};

body {
    margin:0px;
    padding:0px;
}

#control {
    position:absolute;
    left;0px;
    width:100%;
    top:0px;
    height:20px;
}

#contents {
    position:absolute;
    top:20px;
    bottom:150px;
    left:0px;
    width:100%;
}

#matrixcanvas {
    position:absolute;
    left:0px;
    width:60%;
    top:0px;
    height:90%;
}

#individualsection {
    position:absolute;
    right:0px;
    width:40%;
    top:0px;
    height:100%;
}

#venndiagramcanvas {
    position:absolute;
    top:0px;
    left:0px;
    height:75%;
    width:100%;
}

#statresults {
    position:absolute;
    left:0px;
    top:75%;
    left:0px;
    width:100%;
    height:25%;
    font-family:monospace;
    overflow:hidden;
}

#vennstock {
    position:absolute;
    left:0px;
    width:100%;
    bottom:0px;
    height:150px;
    overflow:hidden;
}

#preference table td,th {
    width:33%;
    white-space:nowrap;
	color:white;
}

.colorsample {
    position:absolute;
    margin:auto;
    width:14px;
    height:14px;
    border:1px solid gray;
}

<div id="preference">
      <table style="width:100%">
	<tr>
	  <td>Dendrogram</td>
	  <td>
	    <input type="checkbox" id="dendrogramcheck" />
	    <label for="dendrogramcheck" checked>&nbsp;</label>
	  </td><td></td></tr>
	<tr><td>Color scale</td><td style="white-space:nowrap"><div id="colorslider"></div></td><td><span id="colorslidervalue"></span></td></tr>

<tr><td>P-value</td><td style="white-space:nowrap"><div id="pvalueslider"></div></td><td><span id="pvalueslidervalue"></span></td></tr>
	<tr><td>Color</td><td><div id="leftcolorpicker" class="colorsample"></div></td><td><div id="rightcolorpicker" class="colorsample"></div></td></tr>
      </table>
    </div>
</body>

Interactive association matrix

HOW TO USE

Left diagram indicate clustered elements calculated using cross table given as LinkData RDF.

Each cell is colored with from blue to red corresponding high odds ratio and low odds ratio. The odds ratio is used as the distance of two elements in clustering.

The diagram responds to your cursor move and Venn diagram would be shown in right panel indicating statistical significance and raw odds ratio. P-values were obtained using hypergeometric distribution.

Preferred Venn diagrams can be saved when a cell is clicked to compare with overlap of other elements.

DATA FORMAT

The application is capable to interpret RDF tables containing cross tables.

Each row should have a 2x2 contingency table. Suppose we have two elements X and Y and sets of X-positive/-negative and Y-positive/-negative items, the contingency table follows.

Y-positive Y-negative

X-positive N11 N12

X-negative N21 N22

Then the row describing the correlation is

X Y N11 N12 N21 N22.

If you have M elements and would like to obtain their diagram, your LinkData table should have M x (M - 1) / 2 rows.