Interactive association matrix

fullscreen

taendo

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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.

Fork this app as your new one download

Web Search

Contributor Send Message	taendo
Run count	624
Website
License
Fork count	2
Created date	Sep 17, 2012
Last update date	Sep 26, 2012

Forked (Child App)

forked:Interactive association matrix Contributor: David_Gifford Update: Feb 7, 2013 182 runs

forked:Interactive association matrix Contributor: taendo Update: Sep 25, 2012 144 runs

Input Data
Related Ideas

LinkData work list used as input data in this application.
You can change input data and execute application if you change the checkbox.

Association matrix sample 001 Contributor: taendo Update: Sep 17, 2012
357 Downloads
,

3 Applications

Association_matrix
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information

Interactive association matrix

Application

Forked (Child App)

News Feed