plotly / plotly/plotly.js

Adding a dendrogram to heatmaps

オープン
#6,894 コメント 3 件 リアクション 9 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

feature P3
主要言語
JavaScript
スター
18.3k
フォーク
2k
平均マージ
2日 12時間
マージ済み PR(30日)
28

説明

I know there is a duplicate issue, but it looks like that isn't being watched anymore and I'll add a little more detail here.

Duplicate issue: https://github.com/plotly/plotly.js/issues/1321

In many bioinformatics applications, heatmaps are made and need to be grouped on some factor relevant to each column in the heatmap. For example, you may have a heatmap where the columns are the samples and the rows are number of molecules A, B, C, and D found in each sample. Each sample is categorized as either female or male. In a normal heatmap, you would not be able to visualize the differences in numbers of molecules between male and female since they are randomly placed left to right. So, you add a dendrogram to sort the samples into similar groups based on the data used to generate the heatmap.

Since many bioinformaticians use R, they will use a package like pheatmap to create a heatmap with the dendrograms on both the x and y axes. This blog post shows a good example in a bioinformatics context. I am copying the image over for easy access:

image

I would like to have this in plotly js since I am creating a web application to visualize some bioinformatics data. Without the dengrogram, a lot of these plots are meaningless. I could create the plots on the backend and have the front end access them, but that is not as performant as moving the logic over to the front end. In the duplicate issue, there are references to dash_bios clustergram function, but that still requires the plot to be generated on the back end in cases when the front end is written in a javascript framework such as react.

To get this to work, we will need some sort of dendrogram creating tool. I did a cursory search and did not find anything; however, I am not really sure how this is implemented in python either. If someone has more knowledge, I would be interested to hear about it. I would be willing to commit some code to help implement it, but would need guidance from folks more familiar with plotly.js internals and dendrogram calculations.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず重複している issue #1321 とリンク先の pheatmap の例を確認し、要求されているデンドログラムの動作を理解します。この issue にはファイル、テスト、エントリポイントが記載されていないため、実装前に plotly.js のメンテナーからの指針が必要です。クライアント側のデンドログラムで、バックエンドによる生成なしにヒートマップの行と列をグループ化できれば完了とします。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
data-visualization
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。