データ可視化のための美しいナイチンゲール・ローズチャートを作成します。分類データを円形フォーマットで表示するのに最適です。
機能
- データ可視化のための美しいローズチャートを作成: データ可視化のための美しいローズチャートを作成します。
- 分類データ表示のサポート: 分類データ表示をサポートします。
- カスタマイズ可能な色と外観: 色と外観をカスタマイズできます。
- 統計データプレゼンテーションに最適: 統計データプレゼンテーションに最適です。
使用方法
- ステップ 1: 'サンプルを読み込む'をクリックしてデモを確認するか、フォーマットに従ってデータを入力します：ラベル,値,色
- ステップ 2: グラフタイトルと表示オプションをカスタマイズします。
- ステップ 3: 'グラフを生成'ボタンをクリックしてグラフを作成・表示し、必要に応じてダウンロードします。
技術詳細
ナイチンゲール ローズチャートの歴史と極座標
ナイチンゲール ローズチャート（極区図またはコクスコームチャートとも呼ばれる）は、1858年にフローレンス・ナイチンゲールがクリミア戦争中の死亡率データを可視化するために開拓しました。グラフは極座標を使用し、データカテゴリが中心点から放射状に広がる楔形として表現され、半径がデータ値に比例します。角度が変化する円グラフとは異なり、ローズチャートは等しい角度を持ちますが半径が異なり、値の比較がより直感的になります。ツールは極座標（r、θ）からデカルト座標（x、y）への変換を x = r × cos(θ)、y = r × sin(θ) を使用して実装し、セクター面積計算と放射スケーリングを行います。
データマッピングとセクター生成アルゴリズム
グラフ生成アルゴリズムは円を等角度セクター（θ = 360° / n カテゴリ）に分割し、データ値を放射距離にマッピングします。データ処理：値の正規化（最大半径にスケーリング）→ セクターの面積計算（A = ½ r² θ ラジアン単位）→ パレットまたはグラデーションからの色割り当て。セクターレンダリングは SVG パスコマンドまたは Canvas アーク操作を使用し、中心原点から計算された角度と半径で描画します。高度な機能：より良い値分布のための対数または平方根スケーリング、ドーナツチャートスタイルのための内半径設定、セクター分離のためのストローク境界、データ更新間のスムーズなトランジション。アルゴリズムはエッジケースを処理：ゼロ値（可視性のための最小半径）、外れ値（上限または別途スケーリング）、自動配置のためのラベル衝突検出。
視覚デザインと他のグラフとの比較
ナイチンゲール ローズチャートは特定のデータタイプに独自の利点を提供：周期的データ（12ヶ月の年間パターン、24時間の日次サイクル、週次パターン）、カテゴリ比較（等しく重要な複数のカテゴリ）、視覚的インパクト（棒グラフよりもプレゼンテーションで魅力的）。ツールはカスタマイズを提供：配色（シーケンシャル、発散、カテゴリカルパレット）、ラベル配置（セクター内部、コネクター付き外部、放射方向）、サイズ設定（半径、内穴）。代替案との比較：円グラフ（値エンコーディングに角度 vs 半径）、レーダーチャート（複数の変数 vs カテゴリ全体の単一変数）、棒グラフ（線形 vs 円形レイアウト）。エクスポートオプション：インフォグラフィックと印刷メディア用の SVG、レポートとダッシュボード用の PNG/JPEG、ツールチップ付きインタラクティブ HTML。
よくある質問
- ナイチンゲールローズチャートとは何ですか？いつ使用すべきですか？
- ナイチンゲールローズチャート（極座標エリア図）は、各カテゴリが等しい角度を持つがデータ値に比例して変化する半径を持つ扇形として、カテゴリデータを円形形式で表示します。次の場合に使用します：周期的データ（月次パターン、日次サイクル）、カテゴリ比較、および主要カテゴリを強調したい視覚的プレゼンテーション。プレゼンテーションでは棒グラフよりも視覚的に魅力的です。
- ツールはどのデータ形式を受け入れますか？
- データを次の形式で入力します：ラベル,値,色（1行に1エントリ）。色はオプションです - 省略した場合、デフォルトの色が使用されます。例：「Product A,350,#FF6B6B Product B,280,#4ECDC4」。ラベルはテキスト、値は数値、色は16進コード（#FF6B6B）または色名にすることができます。
- セクターはどのようにサイズ設定され、色付けされますか？
- 各セクターは等しい角度（360°をカテゴリ数で割った値）を持ちますが、データ値に基づいて変化する半径を持ちます。半径は値に比例します - より大きな値はより長い放射状セグメントを作成します。色はカテゴリごとに指定するか、デフォルトパレットを使用できます。ツールは比例関係を維持しながら、チャートに適合するように値を自動的にスケーリングします。
- チャートの外観をカスタマイズできますか？
- はい、カスタマイズできます：チャートタイトル、ラベルの表示/非表示（カテゴリ名）、パーセンテージの表示/非表示、個別のカテゴリ色。ツールは、極座標エリア図のコア構造を維持しながら、視覚的プレゼンテーションを調整するオプションを提供します。
- 円グラフや棒グラフと比較してどのような利点がありますか？
- ナイチンゲールチャートは以下を提供します：比較を容易にする等角セクター、大きさを明確に表す放射状の長さ、プレゼンテーションのためのより良い視覚的インパクト、周期的/定期的データに理想的、主要カテゴリを強調するのに効果的。角度が変化する円グラフとは異なり、ローズチャートは一貫した角度を維持し、値の比較をより直感的にします。
関連ドキュメント
- MDN - Canvas API - グラフィックスと可視化のための HTML5 Canvas API
- MDN - SVG ドキュメント - スケーラブルベクターグラフィックスのドキュメントとチュートリアル
- W3C - SVG 仕様 - W3C による公式 SVG 仕様
- MDN - CSS Color - CSS カラー値とカラースペース
- Web.dev - グラフィックスとビジュアルエフェクト - Web グラフィックスとアニメーションのベストプラクティス