濃いマスほど、このテーマでその指標が高いことを示します。
明瞭80
説得50
密度75
制作コスト48
課題適合72
仕事適合80
低高
短い答え
観察可能なプロットキットはいつ選ぶ？
次の条件に合う。分析の記録、学生の研究室、探索的なオフィス チャート
いつ避ける？
次の場合は別の形にする。重いエンタープライズ ダッシュボード キットとピクセルごとに一致させる必要があります
誰が作り、広めた？
Observable Plot は定型文を減らして D3 文法を継続します
何を符号化する？
自動スケールで整然とした列の上にレイヤーをマークします
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
観察可能なプロットキットは自動スケールで整然とした列の上にレイヤーをマークしますとして値を載せます。Observable Plot は定型文を減らして D3 文法を継続します。
業務報告・広告・課題では「分析の記録、学生の研究室、探索的なオフィス チャート」に向く。「重いエンタープライズ ダッシュボード キットとピクセルごとに一致させる必要があります」のときは別の形を選ぶ。
ソフト
- Observable Plot — きちんとしたデータのための文法 - ISC。 · ISC · github.com/observablehq/plot
- Observable stdlib — ノートブックで Plot の横によく使用されるヘルパー。 · ISC · github.com/observablehq/stdlib
- D3 — 根底にあるアイデアと脱出ハッチ。 · ISC · github.com/d3/d3
- Vega-Lite — JSON ファーストの代替文法。 · BSD-3-Clause · github.com/vega/vega-lite
- Scatter demo — このアトラス上の静的散乱ティーチング マーク。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
書き出し
- 書き出し 1 — SVG
- 書き出し 2 — PDF
- 書き出し 3 — スライドへ EMF/SVG（スクリーンショット禁止）
- 書き出し 4 — ウェブはSVG、印刷はPDF
アクセシビリティ
- アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
- アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
- アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
- アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。
観察可能なプロットキット: 自動スケールで整然とした列の上にレイヤーをマークしますを守り、「重いエンタープライズ ダッシュボード キットとピクセルごとに一致させる必要があります」のときは別の図を選ぶ。