細胞分化系譜をd3.jsでplotする

細胞分化の系譜を可視化するために、D3.jsを使ったインタラクティブな可視化ツールをgeminiで作成してみました。 なんでこういう便利なものが世の中にはないのだろうか。

デモ

以下のリンクから、インタラクティブな細胞分化系譜の可視化をご覧いただけます：

細胞分化系譜の可視化を開く

主な機能

• 階層構造の表示: ES細胞から各種分化細胞への分化経路を系統樹として表示
• 日英言語切り替え: ボタンクリックで日本語と英語表示を切り替え可能
• マーカー遺伝子の表示: 各分化段階で重要なマーカー遺伝子を表示
• ズーム・パン機能: マウスホイールでズーム、ドラッグで画面移動が可能
• 色分け表示: 最終分化細胞（緑）と中間前駆細胞（青）を色で区別

可視化されている細胞種

内胚葉系

• 肝細胞（Hepatocyte）
• β細胞（Beta Cell）
• 肺胞上皮細胞（Alveolar Cell）
• 腸上皮細胞（Enterocyte）

中胚葉系

• 造血系細胞（T細胞、マクロファージ、好中球、赤血球など）
• 心筋細胞（Cardiomyocyte）
• 骨格筋細胞（Skeletal Muscle）
• ポドサイト（Podocyte）

外胚葉系

• ニューロン（Neuron）
• アストロサイト（Astrocyte）
• オリゴデンドロサイト（Oligodendrocyte）
• 視細胞（Photoreceptor）
• 表皮細胞（Epidermis）

技術スタック

• D3.js v7: データの可視化とSVG操作
• JavaScript: インタラクション処理
• HTML5/CSS3: レイアウトとスタイリング

操作方法

• マウスホイール: ズームイン・ズームアウト
• ドラッグ: 画面の移動
• 言語切り替えボタン: 日本語⇔英語の切り替え

ぜひインタラクティブな可視化をお試しください！