濃いマスほど、このテーマでその指標が高いことを示します。
明瞭70
説得45
密度92
制作コスト88
課題適合60
仕事適合72
低高
短い答え
D3カスタムクラフトはいつ選ぶ？
次の条件に合う。斬新な形式、研究数値、オーダーメイドの説明者
いつ避ける？
次の場合は別の形にする。Chart.js バーはすでにマネージャーの質問に答えています
誰が作り、広めた？
Mike Bostock D3 (2011) - 依然としてカスタム Viz のクラフト バックボーン
何を符号化する？
明示的なスケールを使用した SVG/キャンバス マークへのデータ結合
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
D3カスタムクラフトは明示的なスケールを使用した SVG/キャンバス マークへのデータ結合として値を載せます。Mike Bostock D3 (2011) - 依然としてカスタム Viz のクラフト バックボーン。
業務報告・広告・課題では「斬新な形式、研究数値、オーダーメイドの説明者」に向く。「Chart.js バーはすでにマネージャーの質問に答えています」のときは別の形を選ぶ。
ソフト
- D3 — スケール、形状、階層などのモジュール - ISC。 · ISC · github.com/d3/d3
- d3-shape — ライン、エリア、スタック、円弧のジェネレーター。 · ISC · github.com/d3/d3-shape
- d3-scale — データドメインを視覚的な範囲に正直にマッピングします。 · ISC · github.com/d3/d3-scale
- Observable Plot — スピードを求める場合は、より高度な D3 ファミリーの文法を使用します。 · ISC · github.com/observablehq/plot
- Vega — 複雑なインタラクティブ仕様のためのランタイム文法の代替。 · BSD-3-Clause · github.com/vega/vega
書き出し
- 書き出し 1 — SVG
- 書き出し 2 — PDF
- 書き出し 3 — スライドへ EMF/SVG（スクリーンショット禁止）
- 書き出し 4 — ウェブはSVG、印刷はPDF
アクセシビリティ
- アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
- アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
- アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
- アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。
D3カスタムクラフト: 明示的なスケールを使用した SVG/キャンバス マークへのデータ結合を守り、「Chart.js バーはすでにマネージャーの質問に答えています」のときは別の図を選ぶ。