Extension:Graph/Kılavuz
Bu sayfa, topluluğun Graph uzantısını kullanarak en iyi uygulamaları yazması içindir. Ayrıca Etkileşimli Grafik Eğitimine bakınız
Bir Vikide Grafikleri Düzenleme
Grafikleri maddelerden ayrı tutun
Grafikler maddenin içinde saklanabilse de, bunları ayrı şablonlar olarak saklamak çok daha iyi bir yaklaşımdır, ör. 'Template:Graph:<yourgraphname> eklenebilir
{{Graph:<yourgraphname>}}
Grafikleri özelleştirilebilir yapın
Grafik ayarlarını doğrudan grafiğin içine yerleştirebilseniz bile, bunu yapmak genellikle kötü bir tasarımdır. Grafikler, farklı veri ve stil kümeleriyle birden çok maddede yeniden kullanılabilen esnek şablonlar olarak yapılmalıdır. Örneğin, grafiğin genişliği ve yüksekliği sabit kodlanmış olsa bile:
"width": 400, "height": 200, // bad design
kolay özelleştirmeye izin verecek şekilde varsayılan değerlerle şablon parametreleri olarak yapılmalıdır:
{{#tag:graph|{
...
"width": {{{width|400}}}, "height": {{{height|200}}}, // good design
...
} }}
Verileri grafikten ayrı tutun
- Yukarıdaki stil gibi, verilerin kendisi de grafikte saklanmamalıdır. Bir grafikten yararlanabilecek büyük bir tablo içeren bir sayfayı düşünelim, ör. en pahalı resimlerin listesi. Sayfa, verilerle oldukça karmaşık bir tablo içerir:
{|
! Price
! Painting
! Image
! Artist
! Year
! ...
|-
! data-sort-value="$300"|~$300
| ''[[When Will You Marry?|Nafea Faa Ipoipo (When Will You Marry?)]]''
| [[File:Paul Gauguin, Nafea Faa Ipoipo? (When Will You Marry?) 1892, oil on canvas, 101 x 77 cm.jpg|95px]]
| {{sort|Gaugin, Paul|[[Paul Gauguin]]}}
| 1892
...
|}
Bir grafik oluşturmanın basit yaklaşımı, gerekli verileri çıkarmak ve grafiği bu verilerle tablonun yanına yerleştirmektir. Bu işe yarayacak olsa da, bu yaklaşım pek iyi değil çünkü artık aynı verinin iki kopyası var ve bir şey değiştiğinde her ikisinin de güncellenmesi gerekiyor. Ayrıca, grafik metnin içindeyse, madde daha da uzar ve grafik kodu ve verilerle dolar. Daha az kişi onu düzenleyebilir. Grafik ayrı bir şablona yerleştirilirse, editörlerin verileri değiştirirken güncellemeyi unutmaları daha olasıdır.
Doğru çözüm, başlangıçta biraz daha zor olmasına rağmen, çok daha ileriye dönük ve yönetilmesi daha kolay bir yol sağlayacaktır ve tüm bu tür listeler için yeniden kullanılabilir.
- Ham verilerle, tercihen JSON biçiminde ayrı bir sayfa oluşturun. Bu dosyanın yapısı, listenin ihtiyaç duyduğu verilere göre belirlenir.
- Bu ham verileri iyi biçimlendirilmiş bir viki tablosuna dönüştüren bir işleve sahip bir Lua modülü oluşturun.
- Aynı Lua modülünde, grafik için gerekli verileri çıkaran ve JSON biçimli veriler olarak çıkış veren başka bir işlev oluşturun.
- Yukarıdaki verileri kullanabilen ve grafiğini çizebilen grafik şablonunu oluşturun
- Son olarak, bu iki pasajı liste sayfasına ekleyin:
verileri içeren iyi biçimlendirilmiş tablo ekler:
{{#invoke:MyLuaModule|BuildTable|PageWithSourceData|...}}
aynı verilerle grafik ekler:
{{Graph:MyGraph | {{#invoke:MyLuaModule|ExtractGraphData|PageWithSourceData|...}} }}
Dış Veriler
Grafik verileri grafik tanımının içine gömülebilir veya bir "url" bağlantısı üzerinden sağlanabilir. Standart Vega'dan farklı olarak, grafik etiketi tüm harici bağlantıların özel viki protokollerinden birini kullanmasını gerektirir:
tabular:///PageWithTabularDataOnCommons.tab- Gets tabular dataset from Commons. Should be used with"format": {"type": "json", "property": "data"}(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:
{
"meta": [{
"description": "Women's weekly earnings as a percent of men's by age, annual averages",
"license_code": "CC0-1.0+",
"license_text": "Creative Commons Zero",
"license_url": "https://creativecommons.org/publicdomain/zero/1.0/",
"sources": "Copied from [https://www.bls.gov/opub/ted/2006/oct/wk1/art02.txt bls.gov] (United States Department of Labor)"
}],
"fields": [{
"name": "year",
"type": "number",
"title": "Year"
}, {
"name": "age_16_24",
"type": "number",
"title": "16–24 y/o"
}, ... ],
"data": [{
"year": 1979,
"age_16_24": 78.5,
...
}, ...]
}
map:///PageWithGeoJsonDataOnCommons.map- Gets map dataset from Commons. Should be used with"format": {"type": "json", "property": "data.features"}(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.wikifile:///Albert_Einstein_photo_1921.jpg- Gets File:Albert_Einstein_photo_1921.jpg image from Commons for an image mark. It is always recommended to add?width=...(and/or height) to make the image the right size and reduce server load.- OBSOLETE, use wikifile: instead
wikirawupload:{{filepath:Albert Einstein photo 1921.jpg}}- Grafik için bir resim alın, ör. Commons'dan. Bu etiket, sorgu parametreleri olmadan uploads.* etki alanındaki herhangi bir içeriği belirtir. Dosya yolunu ve resminin isteğe bağlı boyutunu almak için filepath sihirli anahtar sözcüğünü kullanın. wikiraw:///Article%20title/subpage- Yolun sayfanın başlığı olduğu bir viki sayfasının ham içeriğini alın. Alan adı isteğe bağlıdır ve belirtilirse, en.wikipedia.org, commons.wikimedia.org,... gibi herhangi bir Wikimedia sunucusu olabilir.wikiapi:///?action=query&list=allpages- MediaWiki API'den veri alın. Alan isteğe bağlıdır.wikirest:///api/rest_v1/page/...- RESTbase API'yi çağırın. Alan isteğe bağlıdır.geoshape:///?ids=408,664orgeoshape:///?query=SELECT...- Vikiveri kimliklerini veya URL kodlu bir sorguyu (SPARQL) kullanarak verilen bölgelerin geoshapeslerini (topojson olarak) alınacak geoshapes belirten "id" sütunu ile alın.mapsnapshot:///?width=__&height=__&zoom=__&lat=__&lon=__ [&style=__]- Belirli bir konum/yakınlaştırma/boyut için statik bir harita çizilebilmesi için harita anlık görüntü hizmetine bir bağlantı oluşturur. Parametreler, bunu Kartotherian için anlık görüntü isteğine dönüştürülür - https://maps.wikimedia.org/img/{style},{zoom},{lat},{lon},{width}x{height}@2x.png
Examples of charts with external data
To see working example of graph json which uses external data it is possible to use Template:Graph:Lines and Template:Graph:Stacked template's debug= parameter. For example below template invocation
{{Graph:Lines
| debug=1
| table=bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab
| type=year | xField=year
| series="age_16_24", "age_25_34", "age_35_44", "age_45_54"
| yZero=false | yMin=50 | yMax=100
}}
will produce following graph consistent json
{
//
// ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
// Please do not modify it anywhere else, as it may get copied and override your changes.
// Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
//
// Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
//
"version": 5,
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "update": "width + padding.right", "value":"400" }],
"data": [{
"name": "chart",
"url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title=bls.gov%2FUS+Women%27s+weekly+earnings+as+a+percent+of+men%27s+by+age%2C+annual+averages.tab&format=json&origin=*",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "as": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
},
{"type": "collect", "sort": {"field": ["_xfield"]} }
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]}
, {"type": "formula", "as": "_yfield", "expr": "datum.value" }
]
},
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title=bls.gov%2FUS+Women%27s+weekly+earnings+as+a+percent+of+men%27s+by+age%2C+annual+averages.tab&format=json&origin=*",
"format": {"type": "json", "property": "fields"},
"transform": [
]
},
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 50,
"domainMax": 100,
},
{
"name": "color",
"type": "ordinal",
"range": {"scheme": "category10"},
"domain": {"data": "chart", "field": "key"}
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "field": "name"},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "orient": "bottom", "tickSize": 0,
"tickCount": 7,
"encode": {
"update": { "labels": {
} }
}
},
{
"scale": "y", "orient": "left", "tickSize": 0,
"encode": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"facet": {
"name": ["key"],
"data": "chart",
"groupby": ["key"]
}
},
"marks": [
{
"type": "line",
"from": {"data": ["key"]},
"encode": {
"hover": {
"stroke": {"value": "red"}
},
"update": {
"stroke": {"scale": "color", "field": "key"}
},
"enter": {
"y": {"scale": "y", "field": "_yfield"},
"x": {"scale": "x", "field": "_xfield"},
"stroke": {"scale": "color", "field": "key"},
"interpolate": {"value": "linear"},
"strokeWidth": {"value": 2.5}
}
}
}
],
},
]
}
Sık Karşılaşılan Sorunlar
İç içe geçmiş şablon parametreleri hakkında hatırlatma
Şablonlar, iç içe geçmiş şablon parametrelerini en az bir karakterle ayırmanızı gerektirir, aksi takdirde grafik yalnızca görüntülenmez ve bir sözdizimi hatası alırsınız. Dikkatli olun!
"values": {{{1|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue"} }}}}} // will not render
"values": {{{1|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue"} }} }}} // will render, notice the whitespace in the closing braces
Grafiklerde çift küme parantezi kullanma
Vega 2, "template": "{{indexDate | time: '%b %Y'}}" gibi şablon parametrelerini destekler, ancak MediaWiki "indexDate" şablonunu bulmaya ve onu yansıtmaya çalışacaktır. Bunu önlemek için, ilk küme ayracı yerine \u007b, son kapanış küme ayracı yerine \u007d ve boru simgesi "$pip2" yerine {{!}} kullanın: : "\u007b{indexDate {{!}} time: '%b %Y'}\u007d"
Hata ayıklama
- Geliştirme ve hata ayıklama için en iyi yer Grafik Deneme Tahtası'dır. Siz yazarken grafiğin gerçek zamanlı olarak değiştiğini görmek için JSON kodunu kopyalayın. Grafik deneme tahtası, json yorumlarını anlar ve viki biçimlendirmesini genişletir. Dönüştürülmüş JSON için sağ alt panele bakın.
- To get the graph JSON from a template, while the graph is being displayed, use the following oneliner in the browser's debugger console (hit to show the JSON). If there is more than one graph on the page, increment the
[0]until you get the one you want. Remove first and last quote, and copy/paste to the Vega editor above.
JSON.stringify(Object.values(mw.config.get("wgGraphSpecs"))[0])
- In Google Chrome, this will copy the string directly onto the clipboard [1]:
copy(JSON.stringify(Object.values(mw.config.get("wgGraphSpecs"))[0]))
- You can also use browser's debugger to inspect the graph you are interested in (even if it is not showing) - you should see something like
<div class="mw-graph ... data-graph-id="834d6921e69e66a00b40d8606e39e414145f8288" .... Copy the hash value, hit escape (in Chrome), and use this oneliner to show the JSON (replacing the shown hash value with your own). Remove first and last quote, and copy/paste to the Vega editor above.
JSON.stringify(mw.config.get('wgGraphSpecs')['834d6921e69e66a00b40d8606e39e414145f8288'])