SVGサンバーストチャートジェネレーター

階層データを放射状のサンバーストチャートとして視覚化

階層データ（JSON）

内側半径: 50px

階層の幅: 80px

SVGコード

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <path d="M 250 200 L 250 120 A 130 130 0 0 1 373.63734711837 290.17220926874313 L 297.5528258147577 265.45084971874735 A 50 50 0 0 0 250 200 Z" fill="#3b82f6" stroke="white" stroke-width="2">
    <title>製品A: 180</title>
  </path>
  <path d="M 250 120 L 250 40 A 210 210 0 0 1 431.8653347947321 145 L 362.58330249197707 185 A 130 130 0 0 0 250 120 Z" fill="#8b5cf6" stroke="white" stroke-width="2">
    <title>機能1: 100</title>
  </path>
  <path d="M 362.58330249197707 185 L 431.8653347947321 145 A 210 210 0 0 1 449.7218684219822 314.89356881873897 L 373.63734711837 290.17220926874313 A 130 130 0 0 0 362.58330249197707 185 Z" fill="#ec4899" stroke="white" stroke-width="2">
    <title>機能2: 80</title>
  </path>
  <path d="M 297.5528258147577 265.45084971874735 L 373.63734711837 290.17220926874313 A 130 130 0 0 1 120 250.00000000000003 L 200 250 A 50 50 0 0 0 297.5528258147577 265.45084971874735 Z" fill="#f59e0b" stroke="white" stroke-width="2">
    <title>製品B: 270</title>
  </path>
  <path d="M 373.63734711837 290.17220926874313 L 449.7218684219822 314.89356881873897 A 210 210 0 0 1 250 460 L 250 380 A 130 130 0 0 0 373.63734711837 290.17220926874313 Z" fill="#10b981" stroke="white" stroke-width="2">
    <title>機能3: 120</title>
  </path>
  <path d="M 250 380 L 250 460 A 210 210 0 0 1 126.56509701858066 419.89356881873897 L 173.5879172019785 355.1722092687432 A 130 130 0 0 0 250 380 Z" fill="#06b6d4" stroke="white" stroke-width="2">
    <title>機能4: 60</title>
  </path>
  <path d="M 173.5879172019785 355.1722092687432 L 126.56509701858066 419.89356881873897 A 210 210 0 0 1 40 250.00000000000003 L 120 250.00000000000003 A 130 130 0 0 0 173.5879172019785 355.1722092687432 Z" fill="#6366f1" stroke="white" stroke-width="2">
    <title>機能5: 90</title>
  </path>
  <path d="M 200 250 L 120 250.00000000000003 A 130 130 0 0 1 249.99999999999997 120 L 250 200 A 50 50 0 0 0 200 250 Z" fill="#ef4444" stroke="white" stroke-width="2">
    <title>製品C: 150</title>
  </path>
</svg>

プレビュー

使い方

• 階層構造を持つJSONデータを入力
• 各ノードには name、value（リーフのみ）、childrenを指定
• 内側半径と階層幅を調整してチャートの見た目をカスタマイズ
• SVGにホバーするとツールチップで名前と値を表示
• 生成されたSVGコードをコピーまたはダウンロード