Extension:Graph/ja

Graph (グラフ) 拡張機能は、タグでデータの画像化をJSONで記述しレンダリングします. 棒グラフ、円グラフ、タイムテーブル（年表）やヒストグラム（demo）をVega宣言型プログラミングで生成します.



全般的な情報
Graph 拡張機能は強力な Vega ベースのグラフをウィキページに加えます. グラフは対話的なものにできます.

もっとも簡便にグラフを追加するには、既存のなどのテンプレートを使います. これらのテンプレートはVegaの複雑さを見ずに済みます. 熟練の利用者ならグラフ用サンドボックスでグラフが作成できます. グラフのサンドボックスでは、JSON に加えてウィキのテンプレート構文を使用できます. The extension integrates with VisualEditor, providing a simple tool/wizard which generates basic graphs, by entering values directly to the editor.



有用なリンク

 * Vega 2ドキュメント - 復元されたVega 2ドキュメントページ.
 * - ウィキでグラフを使う方法の標準的な推奨.
 * - ゼロから複雑でインタラクティブなグラフ完成まで、段階的に解説する説明書.
 * - 多くのサンプルと使い方のトリックを紹介します.
 * TechTalk 動画 - ウィキメディア財団技術部門の議論. Graph 拡張機能を取上げ、Lyra エディターを分かりやすくデモしている (labsにも合わせてインストールする).
 * 興味があれば、Vegaの将来的な機能の動画も参照できる（Jeffrey Heerの基調講演）.
 * 開発者のための Vega 解説 - Vegaのリソースを探すならこちらが最適.
 * 対話的な Vega の紹介動画
 * 対話的な Vega の紹介動画

インストール


追加設定のセットアップ
en.wikiのような本番環境を複製したい場合、以下のステップを実行する必要があります.

ルール (Vagrantを使用することにした場合のみ)


 * graphsロールを有効にする
 * scribuntoロールを有効にする
 * imagemapロールを有効にする

テンプレートとLuaモジュール


 * Module:Graph をローカルにコピーする
 * Module:Graph/doc をローカルにコピーする
 * Template:Nowrap をローカルにコピーする
 * Copy Template:Nowrap/styles.css locally
 * Module:Chartをローカルにコピーする
 * Module:Chart/Default_colors をローカルにコピーする
 * File:Circle_frame.svg をローカルにコピーする



表の例
サンプルや使用法の裏技はを参照してください.



利用者定義のフォールバック
クライアント サイドのレンダリングを使用する場合、 利用者に静的なフォールバック画像を提供するためにウィキメディア コモンズが使用できます. これは、サーバーサイドレンダリングを提供するために新しいサービスが実装されるまでの一時的な対処です.

利用者は最初に静的なグラフをウィキメディア コモンズにアップロードする必要があります.

フォールバック画像には2つの変数  と   があります.

はWikimedia Commonsのファイル名に対応します.

はフォールバック画像の幅のピクセル数です.

これらの変数は以下の方法でグラフを通して渡されます.

Module:Graphのようなluaモジュールを使用する場合、これらの変数はタグ関数で提供することができます. を適応させると、こんな感じになります.

そして、次のような形でテンプレートに活用されることになる.

fallbackWidth が提供されず、画像が定義されている場合、拡張機能は提供されたグラフ幅から幅を導きます. その理由は、レンダリング画像の幅と実際の画像の幅に差が生じることが多いからです.



外部データ
HTTP(S)を使ってグラフのデータを取得することはできません. 代わりに や 等、固有のウィキ・プロトコルを使用してください.

Graph 拡張機能は  設定を用いてプロトコルの解決を設定します: Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph. In these cases the graph will end up empty (see T168601).



既知のバグと制限

 * tag/graph - Graph 拡張機能のバグ
 * ISO 8601タイムスケールの実装に失敗. したがってタイムラインではグレゴリオ暦のみ使用可能.

内部リンク
解析をすると、Graph 拡張機能はテンプレートのパラメーター/式をすべて展開し、グラフのハッシュを識別子に使うと完全なグラフ定義を ParserOutput ページのプロパティとして保存します.

The graph extension adds HTML to the page where graphs should go, a with a graph-id as the attribute. サンプル:

Graph 拡張機能は ResourceLoader の JavaScript モジュールとして Vega ライブラリを含むページに  を呼び込み、グラフ定義の JSON を通称   と呼ばれる JavaScript   変数に組み込みます. このモジュールがクライアントのブラウザに読み込まれると、Vega JavaScriptライブラリはを個別のHTMLキャンバスに取り込み、その中にグラフを描画すると静止画像と置き換えます.



セキュリティ機能
信用できないデータソース参照を許可しないように、 を設定できます（例: ウィキメディアではウィキメディアのサイト内のデータのみ許可）.

ライセンス
VegaライブラリはBSDライセンスの修正版容認の範囲で使用できるものとして配布されます.

BSDライセンスの複写に（容認できる範囲の）微調整を加えたようにも見えます. 使用に際して問題はありませんが、このような変更をライセンスに加えないと理想的です. ライセンスがオープンソースの使用について安全かどうかという（このような）混乱を防ぐためにも、ライセンス条件にこのような改変を行うことは好ましくありません.

wgGraphAllowedDomains
See the section on external data.



その他の変数

 * 2015 - wgGraphUrlBlacklist 変数が 787d64a11 で除去されました
 * 2016 - wgGraphDataDomains が e0813f85a で除去されました. 代わりに wgGraphAllowedDomains を使用してください.
 * 2015 - wgGraphUserServiceAlways が b735f63ff4b で除去されました.
 * 2019 - wgGraphIsTrusted が cf80f43e15 で除去されました.
 * 2020 - $wgGraphImgServiceUrl が廃止予定になりました



グラフ名前空間の有効化
を設定すると、グラフの設定を単独ページとしてそれぞれの名前空間に保管できます.



ビジュアルエディターのモジュール
2015年の夏以降、Graph 拡張機能にはビジュアルエディターを使ってグラフを編集するモジュール (ext.graph.VisualEditor) が付与されました.

このモジュールは「Google Summer of Code 2015」プロジェクトの成果です. 詳細は T89287 を参照してください.

利用者はこのモジュールを使い、外部の拡張機能ノードに頼らずとも、VisualEditor内でグラフを見ることができます. ユーザーはさらに、グラフの形式、データやパディングを編集するダイアログを開くことができます. ユーザーインタフェース（UI）ではさらに、ウィキテキスト・エディターに切り替えなくてもビジュアルエディター上でグラフの生JSON定義を直接、編集できます. 熟練したユーザーなら、これを使ってUIのサポートしない設定の微調整も可能です.

この第1ステップは、ビジュアルエディター内でどのようなグラフ編集ができるかという試金石になり、またモジュールとして改善したり伸展する方法が十分にあります.



壊れたグラフのトラブルシューティング
グラフを含むエラーは、開発者コンソールに記録されます.

Error: Bad constructor arguments (T277906)
修正方法 filepath:Earthmap1000x500compac.jpg を filepath:Earthmap1000x500.jpg に置き換える.

例.

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
To fix: Make sure you have not set default as null

Example.



関連項目

 * — エッジ（枝）で結ばれた複数のノード（頂点）のグラフを表示（このページで解説した拡張機能の表形式ではない）
 * Plotly — オープンソースのJavaScriptグラフ作成ライブラリ（3D作表も可能）
 * D3 — データ駆動型ドキュメント