DATA VISUALIZATION

データ可視化ブロック

データを視覚的に表現するブロック群です。棒グラフ・ドーナツチャート・プログレスバー・ラジアルバーなど、数値情報を伝えるのに向いています。

bar-chart（棒グラフ）

デモ

カスタマイズ

items

label / value / color のセットで各バーを定義します

maxValue

グラフの最大値を指定します（デフォルト: 100）

showGrid

true / false — グリッド線の表示を切り替えられます

showValue

true / false — 値ラベルの表示を切り替えられます

animated

true / false — スクロール時のアニメーションを切り替えられます

barHeight

バーの高さをpxで指定できます

suffix

値の後ろに付けるサフィックスを指定できます（例: %, 件, pt）

こんなシーンで使える

• プロフィールページのスキルチャートとして技術レベルを視覚化するのに向いています
• 調査・アンケートの結果を棒グラフで伝えると読者が直感的に理解しやすくなります
• 製品・サービスの実績データを比較表示するのに便利です

donut-chart（ドーナツチャート）

デモ

カスタマイズ

items

label / value / color のセットで各セグメントを定義します

size

sm / md / lg — チャート全体のサイズを3段階から選べます

strokeWidth

ドーナツの帯の太さを数値で指定できます

animated

true / false — スクロール時のアニメーションを切り替えられます

showValue

true / false — 各セグメントの値ラベル表示を切り替えられます

こんなシーンで使える

• アクセス解析の流入元比率をひと目で伝えたいときに向いています
• プロジェクトの予算配分や工数内訳をビジュアルで見せるのに便利です
• マーケット調査の回答結果を構成比チャートで表現するのに向いています

progress（プログレスバー）

デモ

カスタマイズ

items

label / value / color のセットで各バーを定義します

animated

true / false — スクロール時のアニメーションを切り替えられます

showValue

true / false — 値ラベルの表示を切り替えられます

size

sm / md / lg — バーの太さを3段階から選べます

こんなシーンで使える

• 複数プロジェクトの進行状況をダッシュボード風に見せるのに向いています
• クラウドファンディングや目標達成度の進捗表示に便利です
• スキルレベルをバー形式でシンプルに伝えたいときに向いています

radial-bars（ラジアルバー）

デモ

カスタマイズ

items

label / value / color のセットで各ラジアルバーを定義します

size

sm / md / lg — 円弧のサイズを3段階から選べます

animated

true / false — スクロール時のアニメーションを切り替えられます

こんなシーンで使える

• プロフィールページのスキルセットをビジュアルリッチに見せたいときに向いています
• サービス紹介ページで複数の強みを視覚的に並べるのに便利です
• 棒グラフと組み合わせてレポートページにメリハリをつけるのに向いています

counter（カウンター — データ可視化としての活用）

デモ（横並び — 実績数値セクション）

こんなシーンで使える

• 会社紹介ページの実績数値をインパクトのある形で見せたいときに便利です
• サービス紹介LPで導入実績・顧客数をカウントアップアニメーションで表現するのに向いています
• グリッドと組み合わせることで、4つ・6つの数値をきれいに並べられます