Extension:Graph/Guide/ja

このページではコミュニティからグラフ拡張期能利用の最良の慣行を主題に投稿を集めます. あわせてインタラクティブなグラフのチュートリアル../Interactive Graph Tutorialを参照してください.

グラフを記事部分から分離する
記事の一部としてグラフを埋め込むことはできるものの、別個のテンプレートとして保存するほうが実際的です. たとえばTemplate:Graph: を使うと で埋め込めます.

グラフをカスタム化できるようにする
グラフの設定を直接、グラフ自体に埋め込めるものの、一般には設計としてよくありません. グラフは柔軟なテンプレートとして作成する必要があり、さまざまなどんなデータセットでも書式でも使えて、複数の記事に再利用できるものが求められます. たとえばグラフの幅と高さはサンプルのようにハードコードできます： しかしながら、簡単にカスタマイズできるように、デフォルト値を設定したテンプレートのパラメータとして作成する必要があります.

データはグラフと分離して保存

 * 上記の書式設定で見たように、データ自体はグラフ内に保存できません. 例えば大きな表がありグラフが有効なページの一例として、高額な絵画の一覧（英語版）があり、データを複雑に組み合わせた表を使っています.

グラフを作成する簡単な手法としては、まず必要なデータの抽出から始まり、そのデータを表組みの隣にグラフとして配置します. 確かにこれでもグラフは作れますが、同じページに同一のデータが2組載る点、値が変わるとどちらも更新が必要な点で、最善の策とはいえません. あるいはまた、グラフが本文に埋め込んである場合、記入したグラフのコードやデータのせいで記事が長くなり - 編集できる人の数を制限してしまいます. その点、グラフを独立したテンプレートとして作成すると、今度は、データ更新のときにそのテンプレートの更新を忘れてしまう恐れがあります.

ここでは適切な解決法とは、当初は難しいのですが、時間の経過に強くパスの管理がしやすく、同様のリストに再利用できるものを作ることです.


 * 1) Set up a separate page with the raw data, preferably in JSON format. The structure of that file is determined by the data needed by the list.
 * 2) Create a Lua module with a function that converts that raw data into a well formatted wiki table.
 * 3) In the same Lua module create another function that extracts data needed for the graph, and outputs it as JSON-formatted data.
 * 4) Create the graph template that can consume the above data and plot it
 * 5) Lastly, insert these two snippets into the list page:

inserts well-formatted table with data:

inserts graph with the same data:

外部データ
グラフのデータはグラフの定義に埋め込むか、 リンクで提供します. 標準版のVegaと異なり、グラフのタグは外部リンクをまとめて特性のウィキ・プロトコルのひとつを使います.


 * - Gets tabular dataset from Commons. Should be used with  (or "meta" or "fields"). The data given to the graph is already localized to the wiki language.

For example, this dataset would be given to the graph in this format:


 * - Gets map dataset from Commons. Should be used with  (can also use "meta" to get the same information as for tabular). The data given to the graph is already localized to the wiki language.


 * - Gets File:Einstein_1921.jpg image from Commons for an image mark. It is always recommended to add  (and/or height) to make the image the right size and reduce server load.
 * OBSOLETE, use wikifile: instead  - グラフに使う画像を、例えばコモンズから取得. このタグはアップロードによるコンテンツなら何でも指定できます. * クエリ変数のないドメイン名. ファイルパスを得たり画像をオプションのサイズに設定するには、filepathマジックキーワードを使用.


 * - Get raw content of a wiki page, where the path is the title of the page. The domain is optional, and if specified can be any Wikimedia host such as en.wikipedia.org, commons.wikimedia.org, ...
 * - Get data from the MediaWiki API. The domain is optional.
 * - Call to RESTbase API. The domain is optional.
 * or  - Get geoshapes (as topojson) of the given regions, using Wikidata IDs, or a URL-encoded query (in SPARQL), with "id" column specifying geoshapes to get.
 * - Makes a link to the map snapshot service, so that a static map can be drawn for a given location/zoom/size. Parameters are converted it into a snapshot image request for Kartotherian - https://maps.wikimedia.org/img/{style},{zoom},{lat},{lon},{width}x{height}@2x.png

注意点：入れ子のテンプレートのパラメータ
Templates require you to separate nested template parameters by at least one character, otherwise the graph with simply not display and you will get a syntax error. Be careful! "values": // will not render "values": // will render, notice the whitespace in the closing braces

グラフに波カッコを使うには
Vega 2 supports template parameters, such as  "template": "" , but MediaWiki will attempt to find "indexDate" template and transclude it. To avoid this, use \u007b instead of the first curly brace, \u007d instead of the last closing curly brace, and the | instead of the pipe symbol " ":  "template": "\u007b{indexDate | time: '%b %Y'}\u007d" 

デバッグ

 * The best place to develop and debug is in the Graph Sandbox. Copy JSON code to see the graph change in real time as you type. Graph sandbox understands json comments and expands wiki markup.  See the bottom right panel for the converted JSON.
 * To get the graph JSON from a template, click edit / page preview, and use browser's debugger to inspect the graph (even if it is not showing) - you should see the &lt;div class="mw-graph ... data-graph-id="834d6921e69e66a00b40d8606e39e414145f8288" .... Copy the hash value, hit escape (in Chrome), and use this oneliner to show the JSON. Remove first and last quote, ad copy/paste to the Vega editor above.