Skip to content

Instantly share code, notes, and snippets.

@vitalv

vitalv/index.html

Last active September 21, 2017 06:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vitalv/4198e050f56559856e5533a934cd9b21 to your computer and use it in GitHub Desktop.
Save vitalv/4198e050f56559856e5533a934cd9b21 to your computer and use it in GitHub Desktop.
Download ZIP
2wayANOVA on protein + enrichment (20170714 processed 3 repl)
Raw
index.html
<!DOCTYPE html>
<head>
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- <script src="2wAnova_enrichment.js"></script> -->
</head>
<body>
<style type="text/css">
/*svg {
margin-left: 200px;
}*/
.axis path,
.axis line {
stroke: teal;
shape-rendering: crispEdges;
}
.axis text {
font-family: Optima, Futura, sans-serif;
/*font-weight: bold;*/
font-size: 10px;
fill: teal;
}
.axisY text {
margin-right: 4px;
}
div.tooltip {
position: absolute;
text-align: left;
width: 260px;
height: 70px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<script>
var w = 500;
var h = 300;
var padding = 20;
var paddingX = 200; //extra padding to be used on left hand of x axis to accomodate the long categories that are the yAxis tick labels
var format2f = d3.format(".5f");
var dataset =[{"category": "Amino acid biosynthesis", "in_genes": 318, "bck_genes": 2188, "in_genes_w_annot": 28, "bck_genes_w_annot": 84, "p_val": 2.2638340199413065e-06}, {"category": "Energy metabolism", "in_genes": 318, "bck_genes": 2188, "in_genes_w_annot": 21, "bck_genes_w_annot": 80, "p_val": 0.0015588245713674153}, {"category": "Photosynthesis and respiration", "in_genes": 318, "bck_genes": 2188, "in_genes_w_annot": 22, "bck_genes_w_annot": 97, "p_val": 0.009404039638806289}, {"category": "Translation", "in_genes": 318, "bck_genes": 2188, "in_genes_w_annot": 31, "bck_genes_w_annot": 156, "p_val": 0.021981868226965143}, {"category": "Transcription", "in_genes": 318, "bck_genes": 2188, "in_genes_w_annot": 6, "bck_genes_w_annot": 22, "p_val": 0.030867431070006713}]
//Create tooltips with extra information
var tooltipdiv = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var showtip = function(d) {
tooltipdiv.transition()
.duration(200)
.style("opacity", .9);
tooltipdiv.html(
"<strong>Genes in input list</strong> <span style='color:red'>" + d.in_genes + "</span><br>" +
"<strong>Genes in input list with annotation</strong> <span style='color:red'>" + d.in_genes_w_annot + "</span><br>" +
"<strong>Genes in background list</strong> <span style='color:red'>" + d.bck_genes + "</span><br>" +
"<strong>Genes in background list with annotation</strong> <span style='color:red'>" + d.bck_genes_w_annot + "</span><br>" +
"<strong>q value</strong> <span style='color:red'>" + format2f(d.p_val) + "</span>"
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
var hidetip = function(d) {
tooltipdiv.transition()
.duration(500)
.style("opacity", 0);
}
function wrap(text, width=200) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", -10).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", -10).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
var categories = []
for(var i=0; i<dataset.length; i++) {
categories.push(dataset[i].category);
}
yRange = [h-2*padding]
var s = h/categories.length
for(var i=0; i<dataset.length-1; i++) {
yRange.push(yRange[i]-s)
};
//Create scale functions
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.p_val + 0.01;})])
.range([padding+paddingX, w-padding]);
var yScale = d3.scaleOrdinal()
// .domain(categories)
.range(yRange);
var rScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.in_genes_w_annot}) ])
.range([2, 10]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.p_val); } )
.attr("cy", function(d,i) {return yScale(i)} )
.attr("r", function(d) {return rScale(d.in_genes_w_annot)})
.attr("fill", "blue")
.on('mouseover', showtip)
.on('mouseout', hidetip);
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d.in_genes_w_annot + " / " + d.bck_genes_w_annot;
})
.attr("x", function(d) {return xScale(d.p_val) + rScale(d.in_genes_w_annot) ; })
.attr("y", function(d,i) {return yScale(i); })
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
//.attr("fill", "blue");
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale)
.tickValues(categories);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h-padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axisY")
.attr("transform", "translate(" + paddingX + ",0)")
.call(yAxis)
.selectAll(".tick text")
.call(wrap);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment