三角階段型分布マトリックスヒートマップ生成ツール

三角階段型分布マトリックスヒートマップ生成ツール

三角階段型分布マトリックスヒートマップ生成ツール を使う

GotoKitのすべてのツールはオンラインで直接動作し、ダウンロード不要です。

ワイドテーブル CSV をアップロードして、三角階段状の分布マトリックスヒートマップを生成。色は頻度(日数)、四角は四分位範囲、丸は中央値、バツは平均値を表示。配色3種類、ライト / ダーク背景、PNG / SVG 出力対応。

CSV ファイルをここにドラッグ、またはクリックしてアップロード 形式:1行目は store + 数値区間列(例 "0-50")、1列目はカテゴリ名、セルはその区間の日数 / 回数;最大40行・30区間列
背景スタイル ライト

このツールについて

SCI 論文でよく見る「日数 × 値の区間」行列図。各カテゴリが各区間に何日入るかを階段状の三角ヒートマップで描き、色は頻度、四分位範囲の枠・中央値の点・平均のバツ印は自動計算されます。区間幅は不均等でもOK(0-50、50-100、100-250…)。3配色とライト / ダーク背景を備え、分布の中心と広がりを1枚で把握できます。

  • 高画質 PNG / SVG で書き出し、編集も可能
  • 複数テーマをワンクリックで切替
  • ライト / ダーク両対応
  • 無料・透かしなし・回数制限なし

汎用的な作図ワークフローとの比較

比較項目 このツール 一般的な代替手段
ビジュアルの方向性 特定の図法に最適化 汎用的だが設定が多い
書き出し PNG/SVG の高速書き出し重視 形式は多いが手順は重い
向いている場面 スライド・特集ページ・SNS ビジュアル 複雑な分析図をゼロから構築

説明

三角階段型分布マトリックスヒートマップとは?

三角階段型分布マトリックスヒートマップ(Triangular Distribution Matrix Heatmap)は、都市エネルギーや建築消費量などのSCI論文でよく見られる複合統計チャートです。通常のヒートマップの「1セル=1つの数値」を「1行=1つの完全な分布」へと拡張します。各行はカテゴリ(店舗・都市など)、各列は数値区間を表し、セルの色はその区間に入るサンプル数(日数など)を示します。さらに3つの統計マーカーが自動で重ね描きされます。四分位範囲IQR(データ中央50%の範囲)の枠、中央値の丸点、平均値の×印です。各カテゴリの分布が横軸に沿って順にずれるため、全体が自然と三角の階段状になり、頻度・ばらつき・歪度を一目で把握できます。

機能特徴

  • テンプレート駆動・統計は全自動:ワイド形式CSVに各区間のカウントを入力するだけ。Q1/Q3/中央値/平均値はヒストグラム加重で自動導出され、行は中央値順に自動ソート
  • 三角階段フォルム:中央値昇順の行並びにより、各分布が横軸上で段階的にずれ、論文レベルの階段構図を自動形成
  • 3つの統計マーカー:IQR枠(変動の大きさ)、中央値の点(典型的水準)、平均値の×(平均水準)。点と×が離れるほど分布が歪んでいることを示す
  • 配色3種:アカデミッククラシック(青黄赤・SCI原図を再現)、ビジネスブルー(青の単調階調)、ウォームヒート(オレンジ赤系)をワンクリック切替
  • 低・中・高の3段ゾーン:区間列を自動で3等分し、ゾーン名とカバー範囲を注記
  • ライト/ダーク両モード:論文・スライド・レポート・Webページに合わせて背景をワンクリック切替
  • 多形式エクスポート:高解像度PNG(2xピクセル比)とベクターSVGのダウンロードに対応
  • ローカル処理でプライバシー安心:データはすべてブラウザ内で解析・描画され、サーバーへ送信されません

活用分野

  • 経営分析:店舗/支社ごとの日次注文量・売上の分布・変動・歪度を比較し、「安定型」と「販促牽引型」の業態を識別
  • 学術研究:都市エネルギー・気候・生態・ゲノミクスなど多群サンプルの分布マトリックス比較。SCI定番の複合ヒートマップを再現
  • 人事:部門/従業員ごとの月次業績分布を比較し、中央値と平均値の乖離を確認
  • Webプロダクト:都市/チャネル別のDAU分布マトリックスで、変動の大きいチャネルを特定
  • 品質・オペレーション:生産ライン別の日産量分布、サポートチーム別のチケット量分布を並列比較

使い方

  1. 「CSVテンプレートをダウンロード」をクリックしてサンプルファイルを取得
  2. テンプレート形式に沿ってデータを入力:ヘッダー行は store と各区間列(例 "0-50")、1列目はカテゴリ名、セルにはその区間の日数/回数
  3. アップロード領域をクリック、またはCSVファイルをページにドラッグ&ドロップ
  4. 三角階段ヒートマップが自動生成。配色とライト/ダークモードを切り替えてプレビュー
  5. 任意:入力欄でグラフ内タイトルを編集
  6. 「PNGをダウンロード」または「SVGをダウンロード」で画像を保存

データ形式

フィールド必須説明
ヘッダー行はい1列目はカテゴリのフィールド名(例 store)、以降は1列ごとに区間ラベル(例 “0-50”、“50-100”)。区間幅は不均一でも可
1列目はいカテゴリ名(店舗・都市・部門など)
セルはいそのカテゴリのサンプルが区間に入る回数/日数。非負の数値、空欄可(0として扱う)

制限:カテゴリは最大40行、区間列は最大20列・最低3列。各行に1つ以上の正の値が必要です。区間ラベルが数値範囲として解析できる場合(例 “0-50”)、統計値は実数値で内挿計算されます。解析できない場合は区間番号で近似計算されます。IQR・中央値・平均値・行の並びはすべて自動導出のため、手計算は不要です。

このグラフの読み方

各行が1カテゴリの分布です。セルが濃いほどその区間にいた日数が多く、濃い帯がデータの密集域です。自動で描かれる四分位範囲と中央値の点が典型的な区間を示し、平均のバツ印が中央値から大きく離れていれば分布のゆがみを意味します。行を比べて、どこが集中しどこが散らばっているかを見ましょう。

Gotokitについて

Gotokitは、シンプル・高効率・美しいオンラインツールの提供に取り組んでいます。この三角階段型分布マトリックスヒートマップ生成ツールはEChartsレンダリングエンジンを採用し、登録・ログイン不要で開いてすぐ使えます。データは完全にローカルで処理され、プライバシーが守られます。

よくある質問

区間のワイド表はどう並べますか:1行目に区間ヘッダ、1列目にカテゴリ、セルに日数?

ワイド形式のマトリックス:ヘッダー行はカテゴリのフィールド名(例 store)+区間列(例 "0-50"、"50-100"。区間幅は不均一でも可)、1列目はカテゴリ名、セルはその区間の日数/回数。最大40行・20区間列、最低3区間列が必要です。

IQR・中央値・平均値は自分で計算する必要がありますか?

いいえ。Q1/Q3/中央値/平均値はヒストグラム加重で自動導出されます。区間ラベルが数値範囲として解析できる場合(例 "0-50")は実数値で内挿、できない場合は区間番号で近似計算されます。三角階段を形成する行の並びも中央値で自動ソートされます。

このチャートはスライド・レポート・SNS のどれに向いていますか?

どれにも使えますが、重視点が違います。スライドは読みやすさ、レポートは構造と注釈、SNS は密度と見映えが重要です。用途に合わせて配色・ラベル・書き出しサイズを調整してください。

PNG と SVG はどう使い分ければよいですか?

スライドや SNS、メッセージ用途なら PNG が扱いやすく、編集継続や印刷、デザインシステム組み込みには SVG が向いています。SVG 非対応の配信先では高解像度 PNG を使ってください。

一般的なグラフツールとの違いは?

これらのツールは特定の図法やレイアウトに最適化されているため、短時間で完成度の高い見た目に到達しやすいです。汎用ツールは柔軟ですが、設定や調整の手間が増えやすいです。

スマホやタブレットでも使えますか?

多くのツールはモバイルブラウザでも動作しますが、複雑な図表や大きなファイル、細かなドラッグ操作はデスクトップの方が快適です。

単発作業向きですか、それとも継続ワークフロー向きですか?

素早い単発作業や確認、仮の書き出しに強いです。継続自動化やチーム協業、深い統合が必要な場合は、別のデスクトップソフトやスクリプトと組み合わせるのが一般的です。

初回でよい結果を出すコツはありますか?

まずは内蔵サンプルか、最小限の実データで試すのがおすすめです。入力形式・見た目・書き出しを確認してから本番データへ切り替えると、最初の調整がかなり速くなります。

デザインのおすすめ

デザインの全ツール

円形エビデンスネットワーク図ジェネレーター

患者数と比較ごとの研究数を独立して入力した CSV から円形エビデンスネットワーク図を生成。円の面積は患者数、曲線の太さは研究数を表示。ローカル処理、ライト・ダーク表示、PNG/SVG 保存に対応し、統計解析は行いません。

Pantoneカラーピッカー

色を選択して近似Pantone色を提示。HEX/RGB表示、コピー、検索リンクに対応。

カラーホイールスタジオ

iro.js ベースのカラーピッカー。色相ホイール、HEX/RGB/HSL/HSV 表示、コピー、パレット保存に対応。

配色スキームジェネレーター

iro.js カラーホイールと HSL アルゴリズムによる配色生成、7 つの配色ルール、UI プレビュー、ワンクリックエクスポート。

パントーン+CMYK+RGB 印刷配色ツール

150色以上のパントーンカラーを搭載した印刷配色ツール。2-5色コンビ、パントーン自動マッチング、CMYK実時間計算、コート紙プレビュー。

オンライン グラデーションアート生成ツール

Art of the Gradient に着想を得たオンラインツール。多層放射グラデーション、ブレンド、ランダム生成、CSS コピーに対応。

オンライン弦図生成ツール - 無料円形関係図

円形のコード図でペア間の関係を読み取る:ノードが円周に並び、弧の長さが各ノードの総流量、リボンの幅と色が2ノード間のつながりの強さを表します。移動・貿易・通話・引用などの関係データに最適。3テーマ、PNG / SVG 出力、すべてローカル処理。

雅致な日付分布リングバブルチャート

1年分のイベントを同心円の日付リングにマッピング(外側に月、内側に向けて日)し、各イベントを柔らかいグラデーションバブルとしてカレンダーセル上に浮かべます。上品な低彩度配色、ライト / ダーク背景、PNG / SVG 出力。

二色グラデーション No.1 ナイチンゲールローズチャート

花びらが左右非対称のグラデーションで同心円状に広がるナイチンゲールローズチャート生成ツール。中心に年号文字を置け、ライト / ダーク背景と PNG / SVG 出力に対応、すべてブラウザ内で処理します。

ポスター風2カラム サンキー図ジェネレーター

ポスター品質の2列サンキー図:左側ノードは鮮やかな色、右側ノードは流量に応じたグレースケールで塗り分け、各フローバンドに名前・値・割合を直接表示。レイアウトが整っておりポスター主役にも最適。ライト / ダーク背景、PNG / SVG 出力。

ストリームグラフ生成ツール - 無料オンライン河川グラフ作成

時系列に沿って揺れるゼロ基線の上下に各系列が対称に積み重なる滑らかなストリームグラフ。層が川の流路のように波打ち、全体に占める各部分の経年変化の比較に最適。2〜16系列、3〜40行、ライト / ダーク背景、PNG / SVG 出力。

モランディ配色オンラインストリームグラフ生成ツール - 青〜ピンクの河川グラフ

モランディのブルー〜ピンク配色のストリームグラフ(ThemeRiver)。低彩度の紺・灰青・くすみピンクが積層した川を穏やかに見せ、層間の白い細い隙間と上部の凡例で系列を整理。落ち着いた高級感ある積層トレンド表現に最適。ライト / ダーク背景、PNG / SVG 出力。

連続誤差帯グラフ生成ツール - 無料オンライン信頼区間チャート

連続誤差帯チャート:主線の下に固定の影ではなく、点ごとに幅が変わる密着バンドを描き、変動期は帯が膨らみ安定期は細くなります。トレンドと不確実性を1枚の図に同居させる表現で、クラシック・レインボー・モランディの3テーマ、ライト / ダーク背景、PNG / SVG 出力。

曲線ステム・バブルチャート生成ツール - 無料オンライン対数軸バブルチャート

タイムライン用の曲線ステム・バブルチャート:各イベントを年軸に置き、細いステムが底辺から右に湾曲して半透明バブルを支えます。Y 軸は対数目盛で 0.7〜14 のような桁違いの値を同一フレームで比較でき、バブルサイズは平方根マッピング。5色カテゴリ、ライト / ダーク背景、PNG / SVG 出力。

モーフ・バブルゾーニングダイアグラム生成ツール - 無料オンライン

子ノードが浮遊せず、Metaball 曲面で中心ノードと油滴のように融合するモーフバブル図。ラベルは各ノードの外縁円弧に沿い、ノード間は破線で接続、青緑系の4色配色が整います。「中心-メンバー」のクラスタ構造表現向けで、ライト / ダーク背景、PNG / SVG 出力。

スカロップ弦図生成ツール - 無料オンライン二分割弦図メーカー

下部のグループ弧が総流量で重み付けされた不均等な扇貝になり、上部のターゲットノードが等幅弧の扇状に広がる二分区コード図。両者間の流れは中心を通るベジェ曲線に沿って曲がる細いリボンで、ノードラベルは放射状に整然と配置。「少数グループ → 多数ターゲット」の2部関係データ向け。ライト / ダーク背景、PNG / SVG 出力。

注釈付きヒートマップ生成ツール - 無料オンライン表形式ヒートマップ

数値をそのまま残す表型ヒートマップ:各セルは色塗りと数値ラベルを併せ持ち、0 を中心に正負へ発散するカラースケール、右側に目盛付きカラーバー。クラシック・レインボー・モランディの3テーマ、ライト / ダーク背景、PNG / SVG 出力。

誤差棒付きグループ化棒グラフ生成ツール - 無料オンライン

学術論文風のエラーバー付きグループ棒グラフ:淡い2系列の棒を並べ、黒い I 字エラーバーを棒の上に立て、全枠の軸と 45° 回転の x ラベルで論文中の図を忠実に再現。実験群間の測定比較向けで、ライト / ダーク背景、PNG / SVG 出力。

リッジラインプロット生成ツール - 無料オンライン山型グラフメーカー

各分布を独立した水平基線ごとに重ねるリッジラインプロット(joy plot)。山は滑らかで互いに重ならず、各行左に系列名、下部にドット凡例で、多数のグループのピークとばらつきを並べて比較できます。最大6系列・400行、ライト / ダーク背景、PNG / SVG 出力。

放射状積み上げ棒グラフ生成ツール - オンライン無料円形バープロットメーカー

各行データを1本の同心円リングにし、総量に比例した弧長でカテゴリ別に分割した放射状積み上げ棒グラフ(レーストラック型)。まるで各年の構成を示す競技場の周回のようで、弧の終端には斜体で総量、右側には縦並びの四角マーカー凡例。ライト / ダーク背景、PNG / SVG 出力。

曲線ファン型ストーリーサンキー図ジェネレーター

扇形ソース、斜めイベントバー、人物アークで参考画像の構成を再現。影響度を帯幅に反映し、CSVからPNG/SVGを出力します。

対数バブル散布図ジェネレーター

CSVから両対数軸のバブル散布図を生成。バブル面積で第3変数を表現し、グループ別に自動配色、y=x破線とR² / P / nの注記を自動追加します。PNG / SVG出力対応。

5段階パステルグラデーション サンキー図ジェネレーター

「ソース → 中継 → ハブ → チャネル → 最終先」の逐次分岐を1枚で描く5段階サンキー図。各ノードに個別のパステルカラー、リボンはソース色 → ターゲット色のグラデーションを低不透明度で重ね、細身ノードと中間列の白いピル型ラベルを配置。3つの柔らかな配色、ライト / ダーク背景、PNG / SVG 出力。

二色対比 歳入歳出フロー サンキー図ジェネレーター

ECharts 標準の sankey レイアウトによる左 → 右の層状ツートン収支サンキー図。歳入側は左からシアンで収束し、中央のシアン → マゼンタに変化する要バーを通過すると、歳出側はマゼンタで右へ段階的に分散します。同じ色族の中では、ノードを流量順に7段階の明暗へ割り当て、濃く太いほど金額が大きく、線のように細い淡い帯はごく小さな科目です。ラベルは列ごとに段階分けし、重なりを自動回避します。3種類の二色配色、ライト / ダーク背景、PNG / SVG 出力に対応。

エネルギーフロー サンキー図オンライン生成ツール

「エネルギー源 → 変換キャリア → 最終用途」を1枚で描く自由深度エネルギーフロー サンキー図(英国DECC風)。各ノードに大地系の多色配色、リボンはソース色 → ターゲット色のグラデーションを約0.2の低不透明度で重ね、全ラベルはバー右側に背景なしで配置。3配色、ライト / ダーク背景、PNG / SVG 出力。

代謝物パスウェイ濃縮 サンキー図生成ツール

「代謝物 → パスウェイ」の2列濃縮 サンキー図と、右側のバブルパネルを1枚で描画。リボンは統一ライトグレーを不透明度約0.6で重ね自然に濃く、全ラベルはバーの左側・右寄せ・垂直中央・ピルなし。約50のパステル代謝物が11のジェム色経路に流入、x=-Log(Pvalue)、面積=Count、赤色=Hit Ratio。ライト / ダーク背景、PNG / SVG 出力。

四段階決定サンキー図オンライン生成ツール

起源 → 宛先 → 判定 → 起源別の内訳まで、全体のファネルを一度に描く4段サンキー図。流量は左から層状に入り、右側で採択 / 不採択の比較バーに分解。年号バッジと3配色付きで、査読・承認・入試などの判定フローに最適。ライト / ダーク背景、PNG / SVG 出力。

三列影響フローサンキー図オンライン生成ツール

「状況タイプ → 場面 → 登場人物」を1枚の影響フロー図につなぎます。リボンの太さがそのまま数値なので、太い場面ほど結末への影響が大きいと分かります。右列ノードは最大の流入元カテゴリの色を自動継承し、下部の凡例はあなたの CSV のノード名をそのまま読み取るため、データを差し替えるだけで図全体が作り変えられます。図内タイトルとキャプション、ライト / ダーク背景、PNG / SVG 出力に対応。

寒暖グラデーションリボン弦図ジェネレーター

暖色ノードと冷色ノードがそれぞれ連続した弧を作る Circos 風コード図。ノード間の線は一端の色から他端の色へと変化する2色グラデーションリボンになり、陣営間の流れが一目瞭然。ゲノム・ネットワーク・生態などの行列データ向け。ダークモードと PNG / SVG 出力対応。

バブルコード図ジェネレーター

バブルコード図はペアの関係データをひとつの大きな円に配置します。各ノードはバブルで、サイズはノード規模、塗りはミント→ブルーの連続カラーマップで強度を表現。リンクは中心に向かって湾曲し、太さはフロー値に比例。ノード名は大円の外側に放射状に並びます。共同研究ネットワーク、サプライチェーン依存、部門間フローなど「関係+ノード指標」のデータ向け。約30ノードでも読みやすく、ダークモードと PNG / SVG 出力に対応。

ラジアルアークフロー図ジェネレーター

「国 → 組織」のフローを同心円レイアウトで描く放射状アークフロー図。上部のアーチは大陸ごとに区切られ、弧上に国の目盛、各目盛から流線が下って総流量でサイズが決まる組織ノードへ収束します。世界の貿易・援助・移民などのフロー物語向け。ダークモード、PNG / SVG 出力。

二色半円コード図ジェネレーター

「源 → 先」の2部フローを二層の半円リングに描く二色コード図。上リングのスレート色ソース扇区と下リングのピンク色ターゲット扇区、ノード幅は総流量で重み付けされ、ベジェ曲線が中心を横切ってターゲット側の矢印へ。脅威モデリング、能力マッピング、要件トレーサビリティ向け。ダークモードと PNG / SVG 出力。

双扇型カラーコード図ジェネレーター

双扇型カラーコード図は2部フローを砂時計の形に描きます。同一円上で上側に5つの実色アーク、下側に5つの淡色アークが対向する扇を形成し、3時・9時方向は開口します。半透明のカラーリボンが中心のくびれで交差し、各セクターは0起点・主目盛10単位の専用軸を持ちます。チャネル別の流れ、コスト配分、要件カバレッジなどの行列データ向け。ダークモードと PNG / SVG 出力対応。

Circos 共線性コード図

Circos 共線性コード図はリングの各セグメントを離散ノードではなく座標つきの連続トラックとして扱います。外側の目盛が位置を示し、中心の細い曲線が区間どうしの対応や共線性を表現します。ゲノム共線性、ブロック移行、アドレス範囲の再配置、層序比較向け。ライト / ダークモードと PNG / SVG 出力対応。

グループ流向コード図ジェネレーター

「多数のソースが少数のグループへ流れ込む」関係を1つのリングで描きます。左半分は紫で統一した小さなソース弧、右半分は1色ずつのグループ弧と右側の縦並び凡例、弧の幅はノードの合計量、中央のリボンはターゲットグループの色で塗られます。グループ弧内の白い仕切りで、各グループが何個のソースから成るかが一目で分かります。サンプル分類、チャネル帰属、トピック割り当て、バッチの行き先向け。ダークモードと PNG / SVG 出力対応。

スペクトル環コード図ジェネレーター

ペア関係の行列をスペクトル環に描きます。ノードは合計量の大きい順に時計回りに並び、弧の色は連続した色帯からサンプリングされるため色相そのものが順位になります(最も赤いものが最大、最も青いものが最小)。各関係は等幅の青緑の細線で中心へ向かって湾曲し、弧の中の白い仕切りがそのノードの接続一覧です。ライト / ダークモードと PNG / SVG 出力に対応。

アーク図ジェネレーター

共起関係を1本の水平基線に載せるクラシックなアーク図。グループ色の目盛ブロックを基線上に並べ、左に縦書きのグループ色ラベル、関係の強さは半透明の半円アークの太さと高さで表現され、400件でもすっきり。タイムラインやペア関係の序列表現向け。ダークモード、PNG / SVG 出力。

グループ配色 玫瑰図ジェネレーター

カテゴリ・値・グループの列から、花びらがグループごとに色分けされ色相が滑らかにつながるナイチンゲールローズを作成。ラベル表示切替、ライト / ダーク背景、PNG / SVG 出力を備え、すべてローカル処理です。

Excalidraw オンラインホワイトボード

Excalidraw ベースのオンライン手描きホワイトボード。フローチャート、草図、ワイヤーフレーム、注釈に対応し、ブラウザローカル編集と PNG、SVG、.excalidraw 出力をサポート。

すべてのカテゴリを見る