はじめに

chart.xkcdは、人気Webコミック「xkcd」の特徴的な手書き風デザインを再現したJavaScript可視化ライブラリです。本稿では、このライブラリが提供する主要なグラフ種別の実装メカニズムと、実践的な活用方法について解説します。

Lineグラフ：時系列データの動的表現

スケール計算の仕組み

LineグラフはD3.jsのスケール機能を活用し、データ空間から描画空間への変換を行います。横軸は離散的なラベルを扱うscaleBand、縦軸は連続値を扱うscaleLinearを採用しています。

// 横軸スケールの定義
const hScale = scaleBand()
  .domain(dataset.categories)
  .range([padding, canvasWidth - padding])
  .padding(0.1);

// 縦軸スケールの定義
const vScale = scaleLinear()
  .domain([0, max(concat(...dataset.series)) * 1.1])
  .range([canvasHeight - padding, padding]);

曲線描画の実装

データ点間の補間にはcurveNaturalを適用し、滑らかな曲線を生成します。手書き風の揺らぎ効果は、パス生成後にフィルタ処理で付与されます。

const pathGen = line()
  .x((val, idx) => hScale(dataset.categories[idx]) + hScale.bandwidth() / 2)
  .y(val => vScale(val))
  .curve(curveNatural);

設定可能なプロパティ一覧

実装サンプル

const trendView = new chartXkcd.Line(svgNode, {
  title: '四半期売上推移',
  xAxis: '期間',
  yAxis: '売上(千円)',
  dataset: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: '国内', values: [320, 450, 380, 520] },
      { name: '海外', values: [280, 310, 420, 490] }
    ]
  },
  config: {
    verticalTicks: 6,
    keyPlacement: chartXkcd.config.positionType.topRight,
    palette: ['#E74C3C', '#3498DB'],
    typeface: 'Comic Neue',
    inkColor: '#2C3E50',
    canvasFill: '#FAFAFA'
  }
});

Bar系グラフ：比較表現の二形態

単純BarとStackedBarの違い

chart.xkcdでは、単一データセットの比較に単純Bar、構成比の表示にStackedBarを使い分けます。データ構造とレンダリングロジックが根本的に異なります。

単純Barのデータ構造

dataset: {
  categories: ['製品A', '製品B', '製品C'],
  series: [{ values: [120, 95, 140] }]
}

StackedBarのデータ構造

dataset: {
  categories: ['製品A', '製品B', '製品C'],
  series: [
    { name: '部品費', values: [40, 35, 50] },
    { name: '人件費', values: [50, 40, 60] },
    { name: 'その他', values: [30, 20, 30] }
  ]
}

StackedBarの積算ロジック

各系列の積み上げ位置を計算するため、累積和を事前に算出します。

const cumulateOffsets = seriesData.reduce((acc, cur, idx) => {
  if (idx === 0) return [new Array(cur.values.length).fill(0)];
  const prevSum = acc[idx - 1];
  const currentSum = cur.values.map((v, i) => v + prevSum[i]);
  return [...acc, currentSum];
}, []);

Pieグラフ：円形データの多様な表現

中心穴による形態変化

donutRatioパラメータで円グラフとドーナツグラフを切り替えます。値は半径に対する比率で、0で完全な円、0.5で中程度の穴、0.7以上で細いリング状になります。

// 標準的な円グラフ
new chartXkcd.Pie(svgNode, {
  config: { donutRatio: 0 }
});

// ドーナツグラフ（穴あり）
new chartXkcd.Pie(svgNode, {
  config: { donutRatio: 0.55 }
});

凡例配置のパターン

const position = chartXkcd.config.positionType;

const layoutOptions = {
  keyPlacement: position.topLeft,     // 左上
  // keyPlacement: position.topRight,   // 右上
  // keyPlacement: position.bottomLeft, // 左下
  // keyPlacement: position.bottomRight // 右下
};

XY散布図：相関関係の視覚化

主な用途

• 変数間の相関分析
• 外れ値の検出
• 時系列での分布確認
• 多変量データの位置づけ

時系列対応の実装

時間軸を持つデータではtimePatternを指定し、適切な目盛り表示を実現します。

new chartXkcd.XY(svgNode, {
  title: 'サーバ負荷の時間変化',
  xAxis: '時刻',
  yAxis: 'CPU使用率(%)',
  dataset: {
    series: [{
      name: 'Webサーバ',
      points: [
        { t: '09:00', v: 45 },
        { t: '12:00', v: 78 },
        { t: '15:00', v: 62 },
        { t: '18:00', v: 85 }
      ]
    }]
  },
  config: {
    timePattern: 'HH:mm',
    connectPoints: true,
    hGridLines: 4,
    vGridLines: 4
  }
});

調整可能なパラメータ

Radarグラフ：多軸評価の表現

能力マトリクスなどの活用例

Radarグラフは複数の評価軸を同時に比較する際に有効です。スキル評価、製品比較、環境分析などに適しています。

new chartXkcd.Radar(svgNode, {
  title: 'フレームワーク比較',
  dataset: {
    axes: ['学習容易性', '生産性', 'パフォーマンス', 'エコシステム', '柔軟性', '採用実績'],
    series: [
      { name: 'Framework X', scores: [90, 85, 75, 95, 80, 88] },
      { name: 'Framework Y', scores: [70, 90, 85, 80, 85, 75] },
      { name: 'Framework Z', scores: [60, 75, 95, 70, 90, 65] }
    ]
  },
  config: {
    axisLabels: true,
    radialDivisions: 5,
    markerScale: 1.2,
    keyVisible: true,
    keyPlacement: chartXkcd.config.positionType.topRight
  }
});

Radar固有の設定項目

パフォーマンス最適化

大規模データセットへの対処

データ点数が増える場合の軽量化策：

// XY散布図の最適化例
new chartXkcd.XY(svgNode, {
  config: {
    markerScale: 0.6,      // マーカー縮小
    connectPoints: false, // 線描画省略
    hGridLines: 3,        // グリッド削減
    vGridLines: 3
  }
});

再描画の効率化

ライブラリ内部では、変更のあった要素のみを更新する差分描画を採用。データ更新時はupdate()メソッドを利用し、完全な再構築を回避します。

スタイル統一のテクニック

テーマ設定の共通化

複数のグラフで一貫したデザインを維持するため、設定オブジェクトを分離して再利用します。

const xkcdTheme = {
  handDrawn: true,
  typeface: 'Comic Neue',
  inkColor: '#34495E',
  canvasFill: '#FDF6E3',
  palette: ['#E74C3C', '#3498DB', '#2ECC71', '#F39C12', '#9B59B6']
};

// 各グラフで展開
const lineChart = new chartXkcd.Line(svg1, {
  dataset: data1,
  config: { ...xkcdTheme, verticalTicks: 5 }
});

const pieChart = new chartXkcd.Pie(svg2, {
  dataset: data2,
  config: { ...xkcdTheme, donutRatio: 0.4 }
});

まとめ

chart.xkcdは、技術的な正確さと親しみやすい視覚表現を両立させたユニークなライブラリです。各グラフ種別の特性を理解し、データの性質や伝えたいメッセージに応じて適切な種別を選択することで、効果的なデータストーリーテリングが可能になります。