Publish your application｜Mash up the Linked Open Data

forked:Interactive association matrix

Save a snapshot
reload

Import an externally hosted application: URL
Check style

save
finish Editing
Cancel

JavaScript
CSS
HTML
Images
Input Data
ReadMe
Snapshots

API Reference (1.0)
Properties

forked: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

history

forked:Interactive association matrix
http://tk-venn2.appspot.com/css/ui-darkness/jquery-ui-1.8.6.custom.css

history

forked:Interactive association matrix

history

forked:Interactive association matrix

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>

Select Input Data

LinkData Work	Table Data
Association matrix sample 001	Association_matrix

Add LinkData work(LinkData)

<p>Interactive association matrix</p><p><br></p><p>HOW TO USE</p><p>Left diagram indicate clustered elements calculated using cross table given as LinkData RDF.</p><p>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.</p><p>The diagram responds to your cursor move and Venn diagram<b> </b>would be shown in right panel indicating statistical significance and raw odds ratio. P-values were obtained using hypergeometric distribution.</p><p>Preferred Venn diagrams can be saved when a cell is clicked to compare with overlap of other elements. <br></p><p><br></p><p>DATA FORMAT</p><p>The application is capable to interpret RDF tables containing cross tables.</p><p>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.</p><p>                   Y-positive   Y-negative</p><p>X-positive    N11            N12</p><p>X-negative   N21            N22</p><p>Then the row describing the correlation is</p><p>X  Y  N11 N12 N21 N22.</p><p><br></p><p>If you have M elements and would like to obtain their diagram, your LinkData table should have M x (M - 1) / 2 rows.</p>

Click the Browse button or drag and drop to choose files to upload