Merge pull request #149 from broadinstitute/demo-2

log transformation handling

Author: kataviz

build/js/gtex-viz.bundle.dev.js

@@ -130,6 +130,8 @@ <h5>GTEx DendroHeatmap</h5>
         const config = {
             id: 'userDendroHeatmap',
             data: data,
+            useLog: true,
+            logBase: 10,
             width: 600, // outer width
             height: 300, // outer height
             marginLeft: 20,

html/GTExViz.dendroHeatmap.html

@@ -27,11 +27,15 @@ <h5>GTEx Heatmap</h5>
 
     <script src="/build/js/gtex-viz.bundle.dev.js"></script>
     <script>
-        let data = generateRandomMatrix({x:50, y:6, scaleFactor:50});
+        let data = generateRandomMatrix({x:50, y:6, scaleFactor:100});
+        console.log(JSON.stringify(data));
+
         GTExViz.heatmap();
         GTExViz.heatmap({
             id: 'userHeatmap',
             data: data,
+            useLog: false,
+            logBase: null,
             width: 800,
             height: 200,
             marginLeft: 20,
@@ -44,23 +48,25 @@ <h5>GTEx Heatmap</h5>
             columnLabelAngle: 60,
             columnLabelPosAdjust: 10,
             rowLabelWidth: 100,
+
         });
         function generateRandomMatrix(par={x:20, y:20, scaleFactor:1}){
             let range = n => Array.from(Array(n).keys());
             let X = range(par.x); // generates a 1-based list.
             let Y = range(par.y);
             let data = [];
             X.forEach((x)=>{
-                x = 'x' + x.toString();
+                x = 'col ' + x.toString();
                 Y.forEach((y)=>{
-                    y = 'y' + y.toString();
+                    y = 'row ' + y.toString();
                     let v = Math.random()*par.scaleFactor;
-                    data.push({
+                    let dataPoint = {
                         x: x,
                         y: y,
                         value: v,
-                        displayValue: v
-                    });
+                        displayValue: v.toPrecision(3)
+                    };
+                    data.push(dataPoint);
                 })
             });
             return data;

html/GTExViz.heatmap.html

@@ -3,14 +3,17 @@
  * Licensed under the BSD 3-clause license (https://github.com/broadinstitute/gtex-viz/blob/master/LICENSE.md)
  */
 
+/*
+1. Color legend for log scale is not spaced correctly.
+ */
 'use strict';
 import {createSvg, generateRandomMatrix} from "./modules/utils";
 import Heatmap from "./modules/Heatmap";
 import DendroHeatmapConfig from "./modules/DendroHeatmapConfig";
 import DendroHeatmap from "./modules/DendroHeatmap";
 
 const demoData = {
-    heatmap:generateRandomMatrix({x:50, y:10, scaleFactor:100}),
+    heatmap:generateRandomMatrix({x:50, y:10, scaleFactor:1000}),
     dendroHeatmap: {
         rowTree: "(((TP53:0.17,SLK:0.17):1.18,NDRG4:1.34):1.33,ACTN3:2.67);",
         colTree: "(((Adipose Visceral Omentum:0.06,Adipose Subcutaneous:0.06):0.00,Bladder:0.06):0.16,Adrenal Gland:0.22);",
@@ -130,7 +133,9 @@ const heatmapDemoConfig = {
     columnLabelAngle: 60,
     columnLabelPosAdjust: 10,
     rowLabelWidth: 100,
-    legendSpace: 50
+    legendSpace: 50,
+    useLog: true,
+    logBase: 10
 };
 
 /**
@@ -159,14 +164,16 @@ export function heatmap(par=heatmapDemoConfig){
 
     // render the heatmap
     let tooltipId = `${par.id}Tooltip`;
-    let h = new Heatmap(par.data, false, null, par.colorScheme, par.cornerRadius, tooltipId);
+    let h = new Heatmap(par.data, par.useLog, par.logBase, par.colorScheme, par.cornerRadius, tooltipId);
     h.draw(svg, {w:inWidth, h:inHeight}, par.columnLabelAngle, false, par.columnLabelPosAdjust);
     h.drawColorLegend(svg, {x:20, y: -20}, 10);
 }
 
 const dendroHeatmapDemoConfig = {
     id: 'gtexVizDendroHeatmap',
     data: demoData.dendroHeatmap,
+    useLog: true,
+    logBase: 10,
     width: 600, // outer width
     height: 300, // outer height
     marginLeft: 20,
@@ -204,9 +211,9 @@ export function dendroHeatmap(par=dendroHeatmapDemoConfig){
     let svgId = `${par.id}Svg`;
     let tooltipId = `${par.id}Tooltip`;
     let dmapConfig = new DendroHeatmapConfig(par.width, par.rowTreePanelWidth, par.colTreePanelHeight, margin);
-    let dmap = new DendroHeatmap(par.data.colTree, par.data.rowTree, par.data.heatmap, par.colorScheme, par.cornerRadius, dmapConfig, tooltipId)
+    let dmap = new DendroHeatmap(par.data.colTree, par.data.rowTree, par.data.heatmap, par.colorScheme, par.cornerRadius, dmapConfig, tooltipId, par.useLog, par.logBase)
     let showColTree = par.data.colTree !== undefined;
     let showRowTree = par.data.rowTree !== undefined;
-    dmap.render(par.id, svgId, showColTree, showRowTree, "top", 5);
+    dmap.render(par.id, svgId, showColTree, showRowTree, "top", 8);
 }
 

src/GTExViz.js

@@ -221,7 +221,7 @@ export default class Heatmap {
         dom.selectAll(".exp-map-ylabel").filter(`.${colClass}`)
             .classed('highlighted', true);
         selected.classed('highlighted', true);
-        const displayValue = d.displayValue === undefined?parseFloat(d.value.toExponential()).toPrecision(4):parseFloat(d.displayValue.toExponential()).toPrecision(4);
+        const displayValue = d.displayValue === undefined?parseFloat(d.value.toExponential()).toPrecision(4):d.displayValue;
         this.tooltip.show(`Column: ${d.x} <br/> Row: ${d.y}<br/> Value: ${displayValue}`);
     }
 

src/modules/Heatmap.js

@@ -154,10 +154,10 @@ export function setColorScale(data, colors="YlGnBu", dmin = 0) {
  * @param orientation {enum} h or v, i.e. horizontal or vertical
  * @param cell
  */
-export function drawColorLegend(title, dom, scale, config, useLog, ticks=10, base=10, cell={h:10, w:50}, orientation="h"){
-
-    const data = [0].concat(scale.ticks(ticks).slice(1)); // why doesn't this provide consistent number of ticks??
-
+export function drawColorLegend(title, dom, scale, config, useLog, ticks=10, base=10, cell={h:10, w:40}, orientation="h"){
+    let range = [...Array(ticks+1).keys()];
+    let interval = scale.domain()[1]/ticks;
+    const data = range.map((d)=>d*interval);
 
     // legend groups
     const legends = dom.append("g").attr("transform", `translate(${config.x}, ${config.y})`)
@@ -185,7 +185,7 @@ export function drawColorLegend(title, dom, scale, config, useLog, ticks=10, bas
 
         g.append("text")
             .attr("class", "color-legend")
-            .text((d) => useLog?(Math.pow(base, d)-1).toPrecision(2):d.toPrecision(2))
+            .text((d) => useLog?(Math.pow(base, d)).toPrecision(2):d.toPrecision(2))
             .attr("x", (d, i) => cell.w * i)
             .attr("y", 0);
     } else {

src/modules/colors.js

@@ -124,7 +124,7 @@ export function generateRandomMatrix(par={x:20, y:20, scaleFactor:1}){
                 x: x,
                 y: y,
                 value: v,
-                displayValue: v
+                displayValue: parseFloat(v.toExponential()).toPrecision(3)
             });
         })
     });