talgalili / d3heatmap Goto Github PK
View Code? Open in Web Editor NEWA D3.js-based heatmap htmlwidget for R
License: Other
A D3.js-based heatmap htmlwidget for R
License: Other
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
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")
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")
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 ?
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!
library(d3heatmap)
d3heatmap(mtcars, scale = "column", colors = "Spectral")
Error in rowMeans(x, na.rm = na.rm) : 'x' must be numeric
Any advice?
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?
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.
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
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:
Dendrograms can pivot at any hinge point. It would be helpful to allow interactive reordering by pivoting at these points.
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 :)
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 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
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 )
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))
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))
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")))
Can i use another metric instead of "euclidian", for instance "canberra"
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.
xlab ylab and title not displaying in d3heatmap()..
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
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
Apologies - this was a problem with the png package needing reinstalled, not d3heatmap.
Install and load packages d3heatmap and run the sample
d3heatmap(mtcars, scale = "column", colors = "Blues")
Error above happens.
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;
`
Is it possible to add a hyperlink to each cell or perhaps add a clickable URL to the cellnote?
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.
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)
d3heatmap(x)
f1 <- function(x)
{
d3 <- d3heatmap(x)
print(d3)
}
f1(x)
f2 <- function(x)
{
d3 <- d3heatmap(x)
d3
}
f2(x)
d3heatmap(mtcars, scale="column", colors="Blues",cexCol =2 ,cexRow=0.2)
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
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?
cf handle_click in ggvis?
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];
Can the distance for clustering be generated based on pearson correlation?
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
It would be nice if both scaled and original values were in the tooltip. Otherwise the "feeling" is discordance between visual and numerical.
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
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.
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?
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
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.
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
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 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?
Could an option be added to rotate the horizontal axis to be at angles other than 45 degrees?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.