xlab ylab and title not displaying in d3heatmap()..

eg
d3heatmap(avgs, show_grid = T, scale = "column", dendrogram = "none",anim_duration = 500, color = "Blues",k_col = c(.1,2),xlab="xaxisss",ylab="yaxis",title =paste("Comparison between ",input$ch1," and ",input$ch2))

d3heatmap prints all row and column labels and ends up in a jumbled mess. d3heatmap should choose to not print some row/column labels so that the labels looks nice.

For eg if you have 300 columns print only 30 labels, when you zoom in, calculate the new range and then print another 30 labels within this new zoomed range

Install and load packages d3heatmap and run the sample
d3heatmap(mtcars, scale = "column", colors = "Blues")

Error above happens.

I have a shiny page with a couple of htmlwidgets, including DT and sunburstR, and they work fine. However, I do not manage to get d3heatmap working.

It's strange. When I run the app, I see no errors or warnings in R, but when I look in the browser there's a Javascript error in d3heatmap.js stating that 'heatmap is not a function'. And indeed, heatmap.js is did not get loaded according to my network graph. d3.min.js, datatables.js, and even heatmap.css get loaded. I looked into d3heatmap.yaml and it looks good. I tried it both with the CRAN and github versions.

The file is there:

> list.files(system.file("htmlwidgets","lib","d3heatmapcore",package="d3heatmap"))
[1] "heatmap.css" "heatmap.js" 

Do you have an idea why the heatmap.js does not get attached?

> sessionInfo()
R version 3.2.2 (2015-08-14)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Arch Linux

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C              
 [3] LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8    
 [5] LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                 
 [9] LC_ADDRESS=C               LC_TELEPHONE=C            
[11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] d3heatmap_0.6.1 centrifugeR_0.1 shiny_0.12.2   

Hi,
Great job with the d3heatmap library. I really like it.
Is there any plan to add a color key and density info legend box similar to the one in the picture?
In heatmap2 it is generated using density.info and it is very useful to better understand the data in being plotted.

Thanks a lot,

Julio

Thanks in advance for your time. Would it be possible to implement a download button that saves the heatmap image (both zoomed and not zoomed). If so, how can this be done?

Can i use another metric instead of "euclidian", for instance "canberra"

The tooltips render behind the heatmap cells. I'm not sure what the CSS file is that is being used for slidy_presentations, but it seems like it should be a quick fix if the display parameter below is adjusted to make the tooltip visible.

<div class="d3heatmap-tip se" style="position: fixed; top: 463px; opacity: 0; pointer-events: none; box-sizing: border-box; display: none; left: 449px;"><table><tbody><tr><th align="right">Row</th><td>Hornet 4 Drive</td></tr><tr><th align="right">Column</th><td>gear</td></tr><tr><th align="right">Value</th><td>3</td></tr></tbody></table></div>

---
title: "test"
output: slidy_presentation

---

# Bug reproduction

```{r, eval = TRUE, echo = FALSE, cache = FALSE}
library(d3heatmap)
d3heatmap(mtcars, scale = "column", colors = "Blues")
``` Tool tip renders behind heatmap cells

I would like to color my row labels with something like colRow in heatmap.2. I've tried forking the repo and adding code to do this, but with no success. Can you give guidance as to what the option name needed in createwidget might be?

When using symm = T and only specifying Rowv, the output is different from heatmap2 (with the same set of parameters). I found I have to specify Rowv = rowv, Colv = rowv in d3heatmap to get the same orientation. I guess this is a bug?
Thanks!

Currently d3heatmap requires a height and width argument in d3heatmapOutput. When having varying input sizes, it is difficult to find values in which the line heights are the same, especially when displaying dendrogram.

It would be great if we could set a line height or column width, and the absolute size of the plot is changing based on that.

I was using the d3heatmap library to generate the cluster and heatmap for a dataset with 11374 records, and 8 variables as the clustering criterion.

As seen in the attached screenshot, the heatmap does not show any colour, even though upon mouseover, we can see its corresponding value of a particular cell in a heatmap.

How can we overcome this issue? Thanks

Hardware and software specs:

1. Intel Processor i5-4200 with 8GB RAM
2. Windows 7 OS
3. R version 3.1.2
4. R studio Version 0.98.1103

Hi! I really like the interactivity of d3heatmap! I have a data matrix that has NA values. When there is a mix of data and NA values, the NAs are plotted in a solid colour and say NULL. This is what I want. However, I am reordering by rows only and not columns. If the my first column is NA (but has data after it), then I can't get a plot. I also can't get a plot if the entire row is NA. Preferably I would like the former case (NAs then data) to plot, as well as a solid colour as above for a row of NAs/no data. But I would settle for just the first case working! Any suggestions?

I have been looking for an interactive heatmap package for a while and I really like what you did w/ d3heatmap. Thank you for sharing this.

I am interested in plotting a line chart restricted to the a single selected row. Currently the heatmap will highlight the selected row. I wanted a "hook function" that returns what row is selected so I can plot a line chart restricted to just that row.

Could you possibly give me a clue as to where it would be easiest to implement such a function? Can it be done by modifying the shiny server function for d3heatmap?

I tried your example: http://rpubs.com/jcheng/mtcars-heatmap.
It works perfectly in the global view. However, the tooltips don't show the corresponding row and column info when zooming in the heatmap. It seems it's a bug for Firefox (tested on ver42.0). IE works. I haven't tested on Chrome.

New Bitmap Image.pdf

Hi,

I noticed that in Shiny apps the tooltip doesn't work in the latest firefox (38.0.1) browser. It shows "undefined" instead of a value. The widget does work in Chrome and IE by the way.

I think it would also be nice to highlight both matching row and column names when hovering over a cell. Especially on larger matrices currently it is hard to tell on which row and column you are hovering over.

kind regards, Herman

when running the basic example

library(d3heatmap)
d3heatmap(mtcars, scale = "column", colors = "Spectral")

I get the error:

Error: 'col_numeric' is not an exported object from 'namespace:scales'

I'm not even sure how to begin to debug this.

Easy fix:
First, add browser checking:
http://stackoverflow.com/questions/15159002/d3-js-browser-support
In heatmapcore.js, define var current_origin before brush definition. In brush function, if resetting, set current_origin to [0,0]. Otherwise, set it to ex[0] (minima of brush extent).

Then, in mouseover labels, subtract appropriate values from row and column numbers, i.e.,
`

      var origin_col = current_origin[0];

      var col = Math.floor(x.invert(offsetX));

      if(isFirefox) col =  col - origin_col;

      var origin_row = current_origin[1];

      var row = Math.floor(y.invert(offsetY));

      if(isFirefox) row = row - origin_row;

`

colRow not used.

d3heatmap(mtcars, scale="column", colors="Blues",labRow=as.character(mtcars$mpg),colRow=paste0(colnames(mtcars),"_test") )

labRow also ignored.

hcl_row <- as.dendrogram(hclust(dist(mtcars)))
hcl_col <- as.dendrogram(hclust(dist(t(mtcars))))

d3heatmap(mtcars, Rowv = hcl_row,Colv = hcl_col, scale="column", colors="Blues",labRow=as.character(mtcars$mpg),colRow=colnames(paste0(mtcars,"_test")))

xlab ylab and title not displaying in d3heatmap()..

I wonder if d3heatmap is suitable to build the equivalent of Mike Bostock's Les Misérables Co-occurrence?

How would I build the sexy transitions using d3heatmap and shiny?

Would any other tool (within R & shiny) offer similar / better results?

(see here )

I am Prathyusha Bachali, Bioinformatician at Ampel Biosolutions doing microarray data analysis and I used generate heatmaps using heatmap.2 of gplots package. This does not favor me with zooming the data feature in heatmap. But d3heatmap package has this awesome quality where I can zoom the chunks of my heatmap. I am able to generate heatmap using up till 2000 rows. If it is more than that, it is not throwing any error it is generating heatmap but it is leaving blank space but I can see the values if i hover.
I am not sure how to solve this issue. Here is the screenshot of my heatmap.
.
Any help or suggestion would be appreciated.

Thanks,
Prat

I know this is not really a bug but I was hoping there would be some solution.

I am trying to visualized a 1500x1500 correlation matrix. R crashes if I try to show it directly.
I can write it to a file with saveWidget but no browsers are able to show it (most crashes or simply shows nothing in the end waiting for a script to finish).
The html file is 25MB.

Is there something I can try to make this work or can d3heatmap be optimized somehow?

cf handle_click in ggvis?

Is it possible to add a hyperlink to each cell or perhaps add a clickable URL to the cellnote?

From README

if (!require(devtools)) {
  install.packages("devtools")
}
devtools::install_github("rstudio/d3-heatmap")

Downloading github repo rstudio/d3-heatmap@master
Error in download(dest, src, auth) : client error: (404) Not Found

Tried without hyphen a la repo name

devtools::install_github("rstudio/d3heatmap")

Downloading github repo rstudio/d3heatmap@master
Installing d3heatmap
Error in isNamespaceLoaded(pkg) : 
  attempt to use zero-length variable name

Using the colorlabels branch RowSideColors and ColSideColors gives black on invalid color. Seems putting an alpha level is also invalid.

d3heatmap(mtcars, scale = "column", colors = "Blues",RowSideColors=heat.colors(nrow(mtcars)),ColSideColors=rainbow(ncol(mtcars)))

d3heatmap(mtcars, scale = "column", colors = "Blues",RowSideColors=substr(heat.colors(nrow(mtcars)),1,7),ColSideColors=substr(rainbow(ncol(mtcars)),1,7))

When trying to plot multiple d3heatmaps within a conditional, the HTML that is generated only plots the final heat map. Below is code for an Rmd to reproduce the bug.

---
title: "test"
output: html_document

---

This is an R Markdown document. 

```{r}
require(d3heatmap)
myVar = TRUE
if (myVar == TRUE) {
  d3heatmap(mtcars, col = "Spectral")
  d3heatmap(mtcars, col = "Blues")
}
```

If the heat maps are outside of a conditional, multiple will appear in the knitted html file. Has anyone else run into this? Any help would be appreciated.

sessionInfo()
R version 3.2.3 (2015-12-10)
Platform: x86_64-apple-darwin13.4.0 (64-bit)
Running under: OS X 10.11.3 (El Capitan)

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] d3heatmap_0.6.1.1

loaded via a namespace (and not attached):
 [1] htmlwidgets_0.6 magrittr_1.5    htmltools_0.3   tools_3.2.3     base64enc_0.1-3
 [6] yaml_2.1.13     stringi_1.0-1   rmarkdown_0.9.5 knitr_1.12.3    stringr_1.0.0  
[11] digest_0.6.9    evaluate_0.8.3  png_0.1-7  

library(d3heatmap)
d3heatmap(mtcars, scale = "column", colors = "Spectral")
Error in rowMeans(x, na.rm = na.rm) : 'x' must be numeric

Any advice?

Hi Joe

Thanks for this, I never used heatmaps, but I tried this new widget and it really works nice.

I picked up that the hover over feature (that gives the row and column name an the actual value) dont work in the firefox browser. Works perfect in Rstudio and chrome. I dont know bout IE, I never even test anything in IE.

Can you please have a look.

Thanks
Natrot

The 'on hover' feature of the tooltip currently displays 'Row', 'Column', and 'Value' as labels within the box. It would be helpful to be able to change these to match the specific case.

I am aware that d3 heatmap uses rownames as default rowlabels. However, on choosing a column having duplicate values as row labels, d3heatmap displays it only once and moves the rest of the labels. For instance, in the image attached, the seven rows from the bottom are genes Dcc through Hcn1 and all the rows after are Snord116 (Snord116 is repeated 31 times). They appear to be labelled incorrectly. Is there anyway to fix this ?

Thanks for the amazing package. I am not sure how hard it is - is it possible to return some mouse events using the d3heatmapOutput function? So the columns and row names could be returned to the server and accessed by downstream code. Just like arguments in plotOutput function - "click", "dbclick", "hover", ...

d3heatmapOutput(outputId, width = "100%", height = "400px")

plotOutput(outputId, width = "100%", height = "400px", click = NULL, dblclick = NULL, hover = NULL, hoverDelay = NULL, hoverDelayType = NULL, brush = NULL, clickId = NULL, hoverId = NULL, inline = FALSE)

Thanks :)

Tooltips and zoom functionality is rendered inconsistently in ioslides_presentations. Sometimes the zoom functionality needs to be used in the previous slide, other times not. The tooltips also render one slide prior to the slide containing the visualization.

---
title: "test"
output: ioslides_presentation

---

# Bug reproduction

- Tool tips for the mtcars heat map will render on this slide
-------------------------------------------------------------------------------

```{r, eval = TRUE, echo = FALSE, cache = FALSE}
library(d3heatmap)
d3heatmap(mtcars, scale = "column", colors = "Blues")

• If you want to use the brush/zoom functionality you need to navigate backwards one slide and do it there, then come back to this slide

• Tooltips for this slide were rendered previously

library(plyr); library(magrittr)
forHeatMap <- plyr::ddply(baseball, "id", summarise,
 duration = max(year) - min(year),
 nteams = length(unique(team))) %>% dplyr::select(duration, nteams)

d3heatmap(forHeatMap, scale = "column", colors = "PuOr")

output: html_document

In rmarkdown a d3heatmap only renders when is explicitly returned to the top level.

For example, in this simple Rmarkdown document, the first and third heatmaps are rendered in the html document, while the second is not.

library(d3heatmap)
x <- matrix(rnorm(100), ncol=10)

This is displayed

d3heatmap(x)

This is not displayed

f1 <- function(x)
{
  d3  <- d3heatmap(x)
  print(d3)
}
f1(x)

This is displayed

f2 <- function(x)
{
  d3  <- d3heatmap(x)
  d3
}
f2(x)

When a tooltip is shown while Shiny changes the heatmap, the old tooltip stays visible and cannot be removed by the user. In general, it seems that d3heatmap creates new tooltip divs every time it is redrawn. As a workaround, I have added this code to my Shiny app:

tags$script('
  $(document).ready(function() {
    $("#heatmap").on("shiny:recalculating", function(event) {
      $(".d3heatmap-tip").remove();
    });
  });
')

However, it would be nice if d3heatmap would remove or recycle the tooltips.

It would be nice if both scaled and original values were in the tooltip. Otherwise the "feeling" is discordance between visual and numerical.

Is there a way to print spanish characters in a heatmap?

I did a similar graph with ggplot2 and didn't have problems with the spanish characters.

A heatmap legend shows the relationship between the colors used and the values.

Could an option be added to rotate the horizontal axis to be at angles other than 45 degrees?

Hi, d3heatmap is a great tool, especially for large datasets. I'm wondering if it's possible to add a function of adding side color panels like this:

Thanks.

Apologies - this was a problem with the png package needing reinstalled, not d3heatmap.

Can the distance for clustering be generated based on pearson correlation?

In the nba_players example the heatmap blocks are rectangular. Add an option that when given a width should calculate the height so that the blocks are square.

when you are doing heatmaps of a volcano. the rectangular blocks stretches the volcano shape.

The d3heatmap works fine when viewing in RStudio, but when put into the same .Rmd document with another htmlwidget plot, it won't render.

A demo is available here: https://beta.rstudioconnect.com/mark/d3heatmapNoRender/

The pertinent R plots are:

# Dygraph
'''{r sessions}
dygraphs::dygraph(ts_data)
'''

# Heatmap
'''{r seo}
d3heatmap::d3heatmap(t(search_matrix), scale = "row", dendrogram = "none")
'''

# Plotly

'''{r revenue}
gadata[gadata$date > as.Date(Sys.Date() - 30),] %>%
  plot_ly(x = date, y = transactionRevenue, group = medium, type = "bar") %>%
  layout(barmode="stack")

'''

When I comment out both of the other plots, the heatmap renders fine.

Dendrograms can pivot at any hinge point. It would be helpful to allow interactive reordering by pivoting at these points.

Flexdashboard/d3heatmap: With regular intervals [it does not happen every time you render] the label from a mouse over does not disappear when the mouse is moved somewhere else. The image persists over the different pages in flexdashboard.

`---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
  orientation: rows
  vertical_layout: scroll

---

```{r setup, include=FALSE}
library(flexdashboard)
library(d3heatmap)
library(corrgram)  # for baseball dataset

```

First page
========================================================

### Chart A

```{r}
data(mtcars)
d3heatmap(mtcars)
```

Second page
==========================================

Row {data-height=1000}
--------------------------------------

### Larger heatmap

```{r}
data(baseball)
b = subset(baseball, select = Atbat:logSal)
rownames(b) = baseball$Name
d3heatmap(b)

```

Sessioninfo:

> sessionInfo()
R version 3.2.2 (2015-08-14)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 14.04.3 LTS

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8     LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                  LC_ADDRESS=C               LC_TELEPHONE=C             LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] corrgram_1.8        d3heatmap_0.6.1.1   flexdashboard_0.1.0

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.5        whisker_0.3-2      magrittr_1.5       cluster_2.0.4      MASS_7.3-45        colorspace_1.2-6   foreach_1.4.3      caTools_1.17.1    
 [9] tools_3.2.2        grid_3.2.2         seriation_1.2-0    png_0.1-7          KernSmooth_2.23-15 registry_0.3       htmltools_0.3.5    iterators_1.0.8   
[17] gtools_3.5.0       digest_0.6.9       bitops_1.0-6       base64enc_0.1-3    gclus_1.3.1        htmlwidgets_0.6    codetools_0.2-14   dendextend_1.1.8  
[25] rsconnect_0.4.2.2  rmarkdown_0.9.6    TSP_1.1-4          gdata_2.17.0       gplots_3.0.1       jsonlite_0.9.20

Would it be possible to enable colour bars for d3heatmap, the annotation with ColSideColors and RowSideColors is one of the most useful features of heatmap.2 for me. Would be great to take that interactive, hopefully wider adoption if interactive heatmaps are compatible with existing workflows.

Looks great though, really excited to see this get used.

Cheers,
Tom K

From the current master branch

for (var i = 0; i < x.matrix.data.length; i++) {
var r = imgData[i*4];
var g = imgData[i*4+1];
var b = imgData[i*4+2];
var a = imgData[i*4+3];
merged.push({
label: x.matrix.data[i],
color: "rgba(" + [r,g,b,a/255].join(",") + ")"
})

From here, "merged" is used to generate the fill values for each rectangle, and the merged[i].label field is used to generate the mouse-over labels.
[...]
.attr("fill", function(d) { if (!d.color) { return "transparent"; } return d.color; });

A more sensible solution (in my opinion) is to use the input data for each rectangle, and run it through a d3 colour scale to generate the colour for that rectangle directly.
This avoids the issue with high values where the scale may be entirely one colour.
This also makes it (relatively) trivial to specify different colour scales, and generate a colour key.

` var max = d3.max(data.data);
var min = d3.min(data.data);

// if symkey then middle = 0; (per heatmap.2 or heatmap.3)
var middle = (min + max)/2;
var colorscale = d3.scale.linear()
  .domain([min, middle, max])
  .range(["blue", "white", "red"])

    // Fill using color scale
    .attr('fill', function(d) {
      // console.log(d);
      return(colorscale(d));
    });`    

And the label generation changes from:
var label = data.merged[row*cols + col].label;
to:
var label = data.data[row*cols + col];