docs examples are added to the example directory for convenience

anders-biostat · Jul 31, 2023 · 757624e · 757624e
1 parent 22cada4
commit 757624e
Show file tree

Hide file tree

Showing 14 changed files with 500 additions and 0 deletions.
diff --git a/example/gallery/ex1/data.js b/example/gallery/ex1/data.js
diff --git a/example/gallery/ex1/index.html b/example/gallery/ex1/index.html
@@ -0,0 +1,65 @@
+<head>
+	<script type="text/javascript" src = "data.js"></script>
+	<script type="text/javascript" src = "../../../build/adds.js"></script>
+	<script type="text/javascript" src = "../../../build/linked-charts.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../../lib/linked-charts.css">
+</head>
+<body>
+<div id = "heatmap-scatter">
+<table>
+   <tr>
+      <td id = "heatmap" style="padding: 0px"></td>
+      <td id = "scatter" style="padding: 0px"></td>
+   </tr>
+</table>
+</div>	
+	<script type="text/javascript">
+
+var xSample = 0, ySample = 1,
+	size = window.innerWidth - 10;
+
+console.log(size);
+
+var hm = lc.heatmap()
+	.width(() => size * 0.48)
+	.height(() => size * 0.48 - 80)
+	.nrows(hData.sampleNames.length)
+	.ncols(hData.sampleNames.length)
+	.value((i, j) => hData.corrMat[i][j])
+	.rowLabel(i => hData.sampleNames[i])
+	.colLabel(i => hData.sampleNames[i])
+	.clusterCols(true)
+	.clusterRows(true)
+	.showLegend(false)
+	.paddings(() => ({top: size * 0.03, left: size * 0.03 + 40, right: size * 0.025 + 40, bottom: size * 0.025}))
+	.on_click(function(row, col) {
+		xSample = row;
+		ySample = col;
+		sch.update();
+	})
+	.place(d3.select("#heatmap-scatter").select("#heatmap"));
+
+var sch = lc.scatter()
+	.width(() => size * 0.48)
+	.height(() => size * 0.48)
+	.x(i => Math.log10(hData.countMatrix[i][xSample] + 1))
+	.y(i => Math.log10(hData.countMatrix[i][ySample] + 1))
+	.size(1.5)
+	.showLegend(false)
+	.opacity(0.7)
+	.place(d3.select("#heatmap-scatter").select("#scatter"));
+
+var slider = lc.colourSlider()
+	.width(() => size * 0.48)
+	.linkedChart(hm)
+	.place(d3.select("#heatmap-scatter").select("#heatmap"));
+
+window.addEventListener("resize", () => {
+	size = window.innerWidth - 10;
+	hm.update();
+	sch.update();
+	slider.update();
+})
+
+	</script>
+</body>
diff --git a/example/gallery/ex2/data.js b/example/gallery/ex2/data.js
diff --git a/example/gallery/ex2/index.html b/example/gallery/ex2/index.html
@@ -0,0 +1,54 @@
+<head>
+	<script type="text/javascript" src = "data.js"></script>
+	<script type="text/javascript" src = "../../../build/adds.js"></script>
+	<script type="text/javascript" src = "../../../build/linked-charts.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../../lib/linked-charts.css">
+</head>
+<body>
+<div id = "ma-expr">
+<table>
+   <tr>
+      <td id = "ma"></td>
+      <td id = "expr"></td>
+   </tr>
+</table>
+</div>	
+	<script type="text/javascript">
+
+var selGene = 0,
+	size = window.innerWidth;
+
+var maPlot = lc.scatter()
+	.x(i => maData.pvals[i].AveExpr)
+	.y(i => maData.pvals[i].tissuetumour)
+	.colour(i => maData.pvals[i]["adj.P.Val"] < 0.1 ? "red" : "black")
+	.label(i => maData.geneNames[i])
+	.size(1.3)
+	.on_click(i => {selGene = i; exprPlot.update();})
+	.width(() => (size - 100) * 0.48)
+	.height(() => (size - 100) * 0.48)
+	.set_paddings({left: 15})
+	.place(d3.select("#ma-expr").select("#ma"));
+
+var exprPlot = lc.scatter()
+	.x(i => maData.patients[i])
+	.y(i => maData.countMatrix[selGene][i]/maData.countSums[i] * 1e6 + .1)
+	.logScaleY(10)
+	.colourValue(i => maData.tissue[i])
+	.title(function() {return maData.geneNames[selGene]})
+	.axisTitleY("counts per million (CPM)")
+	.ticksRotateX(45)
+	.width(() => (size - 100) * 0.48)
+	.height(() => (size - 100) * 0.48)
+	.place(d3.select("#ma-expr").select("#expr"));
+
+exprPlot.legend.width(100).update();
+
+window.addEventListener("resize", () => {
+	size = window.innerWidth;
+	maPlot.update();
+	exprPlot.update();
+})
+
+	</script>
+</body>
diff --git a/example/gallery/ex3/data.js b/example/gallery/ex3/data.js
diff --git a/example/gallery/ex3/index.html b/example/gallery/ex3/index.html
@@ -0,0 +1,174 @@
+<head>
+	<script type="text/javascript" src = "data.js"></script>
+	<script type="text/javascript" src = "../../../build/adds.js"></script>
+	<script type="text/javascript" src = "../../../build/linked-charts.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../../lib/linked-charts.css">
+</head>
+<body>
+<div id = "fullApp">
+<table>
+   <tr>
+      <td id = "mean-var"></td>
+      <td id = "expr"></td>
+   </tr>
+   <tr>
+   		<td id = "tsne"></td>
+   		<td id = "table"><table style="border: 1px solid black;"></table></td>
+   </tr>
+</table>
+</div>	
+<script type="text/javascript">
+
+var selGeneFA = 0,
+	size = window.innerWidth;
+
+var tmp = lc.scatter()
+	.x(i => data.means[i])
+	.y(i => data.vars[i]/data.means[i])
+	.label(i => data.geneNames[i])
+	.logScaleX(10)
+	.logScaleY(10)
+	.width(() => size * 0.4)
+	.height(() => size * 0.3)
+	.size(2.5)
+	.title("Variable genes")
+	.titleSize(() => d3.max([size * 0.02, 10]))
+	.axisTitleX("Expression")
+	.axisTitleY("Variability")
+	.on_click(function(i) {
+		selGeneFA = i;
+		exprFA.update();
+		tsneFA.updateElementStyle();
+	})
+	.place(d3.select("#fullApp").select("#mean-var"));
+
+var exprFA = lc.scatter()
+	.x(i => data.sf[i])
+	.y(i => data.countMatrix[selGeneFA][i])
+	.label(i => data.cellNames[i])
+	.logScaleX(10)
+	.title(() => "Expression of " + data.geneNames[selGeneFA])
+	.titleSize(() => d3.max([size * 0.02, 10]))
+	.opacity(0.2)
+	.width(() => size * 0.4)
+	.height(() => size * 0.3)
+	.place(d3.select("#fullApp").select("#expr"));
+
+var tsneFA = lc.scatter()
+	.x(i => data.tsne[i][0])
+	.y(i => data.tsne[i][1])
+	.title("tSNE, press Shift and select some cells")
+	.titleSize(() => d3.max([size * 0.02, 10]))
+	.label(i => data.cellNames[i])
+	.colourValue(i => Math.sqrt(data.countMatrix[selGeneFA][i]/data.sf[i]))
+	.palette(["#FFFFCC","#FFEDA0","#FED976","#FEB24C","#FD8D3C","#FC4E2A","#E31A1C","#BD0026","#800026"])
+	.size(3)
+	.colourLegendTitle(() => data.geneNames[selGeneFA])
+	.on_marked(makeTable)
+	.width(() => size * 0.4)
+	.height(() => size * 0.3)
+	.legend.width(() => d3.max([30, size * 0.06]))
+	.legend.sampleHeight(() => size * 0.02)
+	.place(d3.select("#fullApp").select("#tsne"));
+
+var colOrder = ["geneName", "meanMarked", "sdMarked", "meanUnmarked", "sdUnmarked", "sepScore"],
+	nrow = 15, 
+	varGenes = d3.range(data.geneNames.length)
+		.filter((el, i) => (data.vars[i]/data.means[i] > 1.5 && data.means[i] > 1e-3));
+
+function topGenes() {
+	var selCells = tsneFA.get_marked().layer0,
+		stats = {geneName: [], meanMarked: [], sdMarked: [], meanUnmarked: [], sdUnmarked: [], sepScore: []},
+		i, mm, sdm, mu, sdu, gene;
+
+	if(selCells.length == 0 || selCells.length == data.cellNames.length)
+		return stats;
+
+	for(var sg = 0; sg < varGenes.length; sg++) {
+
+		gene = varGenes[sg];
+		i = 0; mm = 0; mu = 0; sdm = 0; sdu = 0;
+
+		stats.geneName.push(data.geneNames[gene]);
+
+		for(var cell = 0; cell < data.cellNames.length; cell++) 
+			if(cell == selCells[i]) {
+				mm += data.countMatrix[gene][cell];
+				i++;
+			}	else
+				mu += data.countMatrix[gene][cell];
+
+		mm /= selCells.length;
+		mu /= (data.cellNames.length - selCells.length);
+		stats.meanMarked.push(mm.toFixed(2));
+		stats.meanUnmarked.push(mu.toFixed(2));
+
+		i = 0;
+		for(var cell = 0; cell < data.cellNames.length; cell++)
+			if(cell == selCells[i]) {
+				sdm += (data.countMatrix[gene][cell] - mm) * (data.countMatrix[gene][cell] - mm);
+				i++;
+			}	else
+				sdu += (data.countMatrix[gene][cell] - mu) * (data.countMatrix[gene][cell] - mu);
+
+		sdm /= (selCells.length - 1);
+		sdu /= ((data.cellNames.length - selCells.length) - 1);
+		sdm = Math.sqrt(sdm);
+		sdu = Math.sqrt(sdu);
+		stats.sdMarked.push(sdm.toFixed(2));
+		stats.sdUnmarked.push(sdu.toFixed(2));
+		stats.sepScore.push(((mm - mu)/d3.max([sdu + sdm, 0.002])).toFixed(2));
+	}
+
+	var topStats = {geneName: [], meanMarked: [], sdMarked: [], meanUnmarked: [], sdUnmarked: [], sepScore: []},
+		order = d3.range(data.geneNames.length).sort((a, b) => Math.abs(stats.sepScore[b]) - Math.abs(stats.sepScore[a]));
+
+	for(var col in topStats){
+		topStats[col].push(col);
+		for(var i = 0; i < nrow; i++)
+			topStats[col].push(stats[col][order[i]]);
+	}
+
+	return topStats;	
+}
+
+function makeTable() {
+	var stats = topGenes();
+
+	var rows = d3.select("#fullApp")
+		.select("#table")
+			.select("table")
+				.selectAll("tr")
+					.data(d3.range(d3.min([nrow, stats.geneName.length])));
+	rows.exit()
+		.remove();
+	rows.enter()
+		.append("tr");
+
+	var cells = d3.select("#fullApp")
+		.select("#table")
+			.select("table")
+
+				.selectAll("tr")
+					.selectAll("td")
+						.data(d => colOrder.map(el => [d, el]));
+	cells.exit()
+		.remove();
+	cells.enter()
+		.append("td")
+		.style("padding", "1px 1px 1px 1px")
+		.style("font-size", "10px")
+		.merge(cells)
+			.text(d => stats[d[1]][d[0]]);
+
+}
+
+window.addEventListener("resize", () => {
+	size = window.innerWidth;
+	tmp.update();
+	tsneFA.update();
+	exprFA.update();
+})
+
+	</script>
+</body>
diff --git a/example/gallery/ex4/data.js b/example/gallery/ex4/data.js
diff --git a/example/gallery/ex4/index.html b/example/gallery/ex4/index.html
@@ -0,0 +1,71 @@
+<head>
+	<script type="text/javascript" src = "data.js"></script>
+	<script type="text/javascript" src = "../../../build/adds.js"></script>
+	<script type="text/javascript" src = "../../../build/linked-charts.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../../lib/linked-charts.css">
+	<style type="text/css">
+		table {
+			border-spacing: 0px;
+		}
+		td {
+			padding: 0px;
+		}
+	</style>
+</head>
+<body>
+<div id = "top">
+<table>
+   <tr>
+      <td id = "plot"></td>
+      <td id = "buttons_red"><table></table></td>
+      <td id = "buttons_green"><table></table></td>
+      <td id = "buttons_blue"><table></table></td>
+   </tr>
+</table>
+</div>
+	<script type="text/javascript">
+
+var marker = 0,
+	size = window.innerWidth - 10;
+red = "off";
+green = "off";
+blue = "off";
+
+var cm = {};
+for(var i = 0; i < data.markerNames.length; i++)
+	cm[data.markerNames[i]] = data.countMatrix[i];
+
+var tsne = lc.scatter()
+	.x(i => data.tsne[i][0])
+	.y(i => data.tsne[i][1])
+	.width(() => size * 0.48)
+	.height(() => size * 0.48)
+	.size(1)
+	.colour(i => "rgb(" + cm[red][i] + ", " +
+												cm[green][i] + ", " +
+												cm[blue][i] + ")")
+	.place(d3.select("#top").select("#plot"));
+
+var colours = ["red", "green", "blue"],
+	colour_inputs = [];
+
+for(var i in colours)
+	colour_inputs.push((function(colour) {
+		return lc.input()
+			.type("radio")
+			.width(() => size * 0.16)
+			.fontSize(() => d3.min([size * 0.03, 17]))
+			.title(colour)
+			.elementIds(data.markerNames)
+			.on_change(value => {window[colour] = value; tsne.updateElementStyle()})
+			.value("off")
+			.place(d3.select("#top").select("#buttons_" + colour));
+	})(colours[i]));
+
+window.addEventListener("resize", () => {
+	size = window.innerWidth - 10;
+	tsne.update();
+	colour_inputs.forEach(el => {el.update()});
+})	
+	</script>
+</body>
diff --git a/example/tutorials/iris.js b/example/tutorials/iris.js
diff --git a/example/tutorials/oscc.html b/example/tutorials/oscc.html
@@ -0,0 +1,15 @@
+<script type="text/javascript" src = "../../build/adds.js"></script>
+<script type="text/javascript" src = "../../build/linked-charts.js"></script>
+<link rel="stylesheet" type="text/css" href="../../lib/linked-charts.css">
+
+<script type="text/javascript" src = "oscc/maData.js"></script>
+<script type="text/javascript" src = "oscc/heatmapData.js"></script>
+<div id = "ma-expr">
+<table>
+   <tr>
+      <td id = "ma"></td>
+      <td id = "expr"></td>
+   </tr>
+</table>
+</div>	
+<script type="text/javascript" src="oscc/maPlot.js"></script>
diff --git a/example/tutorials/oscc/heatmapData.js b/example/tutorials/oscc/heatmapData.js
diff --git a/example/tutorials/oscc/maData.js b/example/tutorials/oscc/maData.js