Extension:Graph/Demo/tr

Bu sayfa, uzantısının neler üretebileceğine dair bazı örnekleri gösterir. Grafikler temel teknoloji olarak Vega dilbilgisi (belgeleri) kullanır. Vega ekibi, Grafiklerin kullanımını kolaylaştırmak için diğer araçlarda çalışıyor. Etkileşimli grafikler için bu eğitim yapı grafiklerini adım adım açıklayacaktır. Diğer grafik fikirleri için Vega örneklerine bakın.



Grafik şablonları
Grafikleri kullanmanın en kolay yolu, Graph:Chart (birçok Vikipedi'le4ir de mevcuttur) veya daha özel PieChart gibi önceden oluşturulmuş şablonlardır. Graph:Chart, çizgi, alan ve pie grafikler gibi birçok yaygın grafik türünü destekler:





Vega 2.0 etkileşimli örnekler
Bunun nasıl oluşturulacağı için eğitime bakın:

Extension:Graph/Demo/Dimpvis

Extension:Graph/Demo/Airports

Extension:Graph/Demo/OverviewDetail

Extension:Graph/Demo/IndexChart



RESTBase API'yi kullanma
Sayfa görüntüleme analiz API'sını kullanarak bir tarih aralığı için sayfa görüntüleme grafiklerini gösterin. sayfasına bakın.

Son 30 gün için mevcut sayfa ve tr.wikipedia.org ana sayfası

 Son 30 gün için mevcut sayfa ve tr.wikipedia.org ana sayfası - tür başına



MediaWiki API'yi kullanma
Bu grafik, bir viki sayfası için düzenleme geçmişini gösterir. sayfasına bakın.

Bu grafik, her bir alt kategorideki sayfa sayısını gösterir. Grafik kaynak koduna bakın.



Vikiveri Sorgu Hizmeti API'sini kullanma
Daha fazla örneklere bakın.

Ağaçlar


Kartezyen ağaç
Extension:Graph/Demo/CartesianTree



Radyal ağaç
Extension:Graph/Demo/RadialTree

Dendrogram
Extension:Graph/Demo/Dendrogram



Zaman çizelgesi / yaşam çizgisi
{ "width": 800, "height": 200, "data": [ {     "name": "people", "values": [ {"label":"Washington", "born":-7506057600000, "died":-5366196000000, "enter":-5701424400000, "leave":-5453884800000}, {"label":"Adams",     "born":-7389766800000, "died":-4528285200000, "enter":-5453884800000, "leave":-5327740800000}, {"label":"Jefferson", "born":-7154586000000, "died":-4528285200000, "enter":-5327740800000, "leave":-5075280000000}, {"label":"Madison",   "born":-6904544400000, "died":-4213184400000, "enter":-5075280000000, "leave":-4822819200000}, {"label":"Monroe",    "born":-6679904400000, "died":-4370518800000, "enter":-4822819200000, "leave":-4570358400000} ]   },    {      "name": "events", "format": {"type":"json", "parse":{"when":"date"}}, "values": [ {"name":"Decl. of Independence", "when":"July 4, 1776"}, {"name":"U.S. Constitution",    "when":"3/4/1789"}, {"name":"Louisiana Purchase",   "when":"April 30, 1803"}, {"name":"Monroe Doctrine",      "when":"Dec 2, 1823"} ]   }

], "scales": [ {     "name": "y", "type": "ordinal", "range": "height", "domain": {"data": "people", "field": "label"} },   {      "name": "x", "type": "time", "range": "width", "round": true, "nice": "year", "domain": {"data": "people", "field": ["born", "died"]} } ],  "axes": [ {     "type": "x", "scale": "x", "properties": {"labels": {"fontSize": {"value": 18}}} } ],  "marks": [ {     "type": "text", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -10}, "angle": {"value": -25}, "fill": {"value": "#000"}, "text": {"field": "name"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} }     }    },    {      "type": "rect", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -8}, "width": {"value": 1}, "height": {"field": {"group": "height"}, "offset": 8}, "fill": {"value": "#888"} }     }    },    {      "type": "text", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "y": {"scale": "y", "field": "label", "offset": -3}, "fill": {"value": "#000"}, "text": {"field": "label"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} }     }    },    {      "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "x2": {"scale": "x", "field": "died"}, "y": {"scale": "y", "field": "label"}, "height": {"value": 2}, "fill": {"value": "#557"} }     }    },    {      "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "enter"}, "x2": {"scale": "x", "field": "leave"}, "y": {"scale": "y", "field": "label", "offset":-1}, "height": {"value": 4}, "fill": {"value": "#e44"} }     }    }  ] }



Daha fazla harita örneği
Bu Extension:Graph/Demo/Map sayfasını yansıtır. etiketinin o sayfadaki JSON verileri,  verilerinin ayrı bir URL'den geldiğini belirtir, Extension:Graph/Demo/RawData:WorldMap-iso2-json içeren harita verisindeki JSON biçimi. etiketi JSON verilerindeki öğelerden biri, her ülke için  biçiminde bir vurgu rengi belirtir:

Vega genellikle  biçimindeki verilerle çalışır. Verileri dönüştürmek için yardımcı bir Lua işlevi oluşturdum:

Lua işlevinin çıkışı, Vega'nın biçimindeki verilerdir:

İşte daha karmaşık bir veri işleme örneği: MapTemplate, onu dünyadaki 2010 nüfus dağılımından alan Lua'dan gelen verilerle genişletildi (veriler UN verisinde barındırmaktadır). Bu grafiği oluşturmak için Lua modülünü Graph:Utils'in  işlevini kullanarak Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv sayfası (csv biçiminde) ve bu verileri ilk adsız parametre olarak MapTemplate grafiğine iletin. İsteğe bağlı ek parametre, %80'e ölçeklenmesi gerektiğini belirtir.



Göstergenin nasıl yanlış yerleştirildiğine dikkat edin. Daha düşük ölçeklerde bu olmayacak.



MediaWiki şablon parametrelerini aktarma
Şablon olarak bir viki sayfası kullanıyorsanız, diğer MediaWiki şablonlarında olduğu gibi parametrelere geçebilirsiniz.

Örnek olarak, 'deki grafik belirtimi  için bir dolgu rengini kodlamaz; bunun yerine dolgu rengini   olarak ayarlar. Bu nedenle, bu sayfayı ziyaret ederseniz veya parametresiz bir şekilde dönüştürürseniz, grafik  ile doldurulur; ancak bu sayfayı yansıtma yaparsanız, ilk şablon parametresi olarak dolgu rengini belirtebilirsiniz.





Tekrarlanan grafikler için şablon kullanmak
Aynı formda birden fazla grafiğiniz varsa bu çok kullanışlıdır: ayrıntılı grafiği JSON ve ek tekrar eden vikimetine bir şablona yerleştirebilir ve ona yalnızca başlık ve değerler gibi değişen parametreleri iletebilirsiniz. Bu yaklaşımın bir örneğini bakın.



İki tür verinin üst üste yapılması
Falkensee grafik örneği, koda bakınız.



Yatay çubuk grafiği
Extension:Graph/Demo/HorizontalBarGraphSample

Doğrudan ile gömme
Bu örnek, geçerli sayfanın içindeki JSON grafiğini içeren bir etiketidir.

{ "version": 2, "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2,  "y": 55}, {"x": 3, "y": 43}, {"x": 4,  "y": 91}, {"x": 5, "y": 81}, {"x": 6,  "y": 53}, {"x": 7, "y": 19}, {"x": 8,  "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }

<span id="Editing_graph_data">

Grafik verilerini düzenleme
JSON'u elle düzenlemek zahmetli ve hataya meyillidir. Bu nedenle, JSON'u daha önce düzenlemek için JSONLint gibi bir JSON denetleyicisi veya Vega Live Editor gibi bir JSON düzenleyicisi kullanmalısınız. $1 etiketinin verileri, yukarıdaki örnekte olduğu gibi doğrudan sayfaya gömülü ise, o zaman sayfayı düzenlemek için Görsel Düzenleyici kullanırsanız, grafik verilerini doğrudan düzenleyebilirsiniz. If the tag's data is directly embedded in the page such as the example above, then if you use VisualEditor to edit the page you can directly edit graph data.