heatmap d3 / Xueyan Mu

md`# convert row (not necessary?)`

d3 = require('d3@5')

import {select} from "@jashkenas/inputs"

import {slider} from "@jashkenas/inputs"

import {ramp} from "@mbostock/color-ramp"

md`

Back to the matter at hand. Lets use those params to create an example SVG. This is what our margins and plot area will look like:

`

mutable scale = {

let x = d3.scaleBand();

x.domain(genenames);

x.range([0, params.plot.width]);

let y = d3.scaleBand();

//reduces the GO terms to the top # most significant

// y.domain(goterms);

y.domain(goterms.slice(0, 50));

y.range([params.plot.height, 0]);

return {x: x, y: y}

}

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

createPlot("axis_svg");

md`

## Visualization, Part 2

Now, lets try drawing some heatmap cells. We will use the [viridis](https://github.com/d3/d3-scale-chromatic#interpolateViridis) color scale:

`

html`

`

createHeatmap = function(id) {

let node = createPlot(id);

let svg = d3.select(node);

let plot = svg.select("g#plot");

//build column by column; create one DR value per column

let columns = plot.selectAll("g.node")

.data(sorted)

.enter()

.append("g") //g is stand-in for group

.attr("class", "cell")

.attr("id", function(d) { return "gene name-" + d["gene name"];})

.attr("transform", function(d) { // shift the entire group to the appropriate x-location

let xpos = translate(scale.x(d["gene name"]), 0);

// console.log(xpos)

return xpos;

})

// create one rect per cell within col group

let cells = columns.selectAll("rect")

.data( function(d) { return d.values;

}) // console.log(d.values[0]);

.enter()

.append("g") //g is stand-in for group

.append("rect")

.attr("x", 0 ) // handled by group transform

.attr("y", function(d) { let ypos = scale.y(d["GOterm"]);

// console.log(d.pval);

// console.log(translate(ypos, 0));

return ypos;

})

.attr("width", scale.x.bandwidth())

.attr("height", scale.y.bandwidth())

// here is the color magic!

.style("fill", function(d) {

let color = scale.color(d.pval);

//console.log(d.pval);

//console.log(color);

return color;

})

// .style("stroke", function(d) { return scale.color(d.pval); })

// .append("g").call(yAxis)

return node;

}

xAxis = g => g

.call(g => g

.append("text")

.attr("fill", "currentColor")

.text(function(d) { return "gene name-" + d["gene name"];})

)

yAxis = g => g

.call(g => g

.append("text")

.attr("fill", "currentColor")

.text( function(d) { return "go term-" + d.pval;})

)

Clipboard = require('clipboard');

styles = html`

<style>

.svg-tooltip {

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

background: rgba(69,77,93,.9);

border-radius: .1rem;

color: #fff;

display: block;

font-size: 14px;

max-width: 320px;

padding: .2rem .4rem;

position: absolute;

text-overflow: ellipsis;

white-space: pre;

z-index: 300;

visibility: hidden;

}

</style>`

tooltip = {

createHeatmap

const tooltip = d3

.select("body")

.append("div")

.attr("class", "svg-tooltip")

.style("position", "absolute")

.style("visibility", "hidden");

// select all rect

d3.selectAll("rect")

.on("mouseover", function(d) {

console.log("tooltip mousover");

if(d){

// change the selection style

d3.select(this)

.attr('stroke-width', '1')

.attr("stroke", "black");

// make the tooltip visible and update its text

tooltip

.style("visibility", "visible")

.text(`gene name: ${d}\nGO term: ${d["GOterm"]}\np-value: ${Math.pow(10, -1 * (d["pval"]))}`);

}

// console.log(d);

})

.on("mousemove", function() {

tooltip

.style("top", d3.event.pageY - 10 + "px")

.style("left", d3.event.pageX + 10 + "px");

console.log("mouse moving");

})

.on("mouseout", function() {

// change the selection style

d3.select(this).attr('stroke-width', '0');

tooltip.style("visibility", "hidden");

console.log("mouse out");

});

}

// tooltip = {

// createHeatmap

// const tooltip = d3.select("body").append("div")

// .attr("class", "svg-tooltip")

// .style("position", "absolute")

// .style("visibility", "hidden")

// .text("I'm a circle!");

// console.log("tooltip created");

// d3.select("#rect")

// .on("mouseover", function(){

// console.log("tooltip mousover");

// return tooltip.style("visibility", "visible");

// })

// .on("mousemove", function(){

// return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");

// })

// .on("mouseout", function(){

// return tooltip.style("visibility", "hidden");

// });

// }

mouseover = function(d){

tooltip.style("opacity", 1)}

mousemove = function(d) {

tooltip

.html("The exact value of<br>this cell is: " + d.value)

.style("left", (d3.mouse(this)[0]+70) + "px")

.style("top", (d3.mouse(this)[1]) + "px")

}

mouseleave = function(d) {

tooltip.style("opacity", 0)

}

viewof left = slider({

min: 0,

max: 500,

step: 1,

value: 80,

title: "Left Margin"

})

viewof keep = slider({

min: 0,

max: 100,

step: 1,

value: 30,

title: "Rows to Keep"

})

md`# parameters `

// helper method to make translating easier

translate = function(x, y) {

return "translate(" + x + "," + y + ")";

};

One platform to build and deploy the best data apps