Extension:Graph/Demo

This page is a translated version of the page Extension:Graph/Demo and the translation is 96% complete.

Bu sayfa, Graph 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, Template: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:

{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
 |x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
 |y2=7,8,9,8,8,9,10,9,5|showValues=}}

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
 |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}

Vega 2.0 etkileşimli örnekler

Extension:Graph/Demo/Dimpvis From https://vega.github.io/editor/#/examples/vega/global-development

Extension:Graph/Demo/Airports From https://vega.github.io/editor/#/examples/vega/airport-connections

Extension:Graph/Demo/OverviewDetail From https://vega.github.io/editor/#/examples/vega/overview-plus-detail

Extension:Graph/Demo/IndexChart From https://vega.github.io/editor/#/examples/vega/stock-index-chart

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. Template:Graph:PageViews sayfasına bakın.

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

{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}

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. {{Graph:PageHistory}} sayfasına bakın.

Güncel Sayfa	Albert Einstein tr.wikipedia.org'dan

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

Category:Extensions by category.	Category:People tr.wikipedia.org'dan

Vikiveri Sorgu Hizmeti API'sini kullanma

Daha fazla örneklere bakın.

Ağaçlar

Zaman çizelgesi / yaşam çizgisi

Daha fazla harita örneği

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

{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}

Vega genellikle [{"id":"country-code", "v":"highlight-color"}, ...] biçimindeki verilerle çalışır. Verileri dönüştürmek için yardımcı bir Lua işlevi oluşturdum:

{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}

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

[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]

İş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 parseCsv 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.

{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}

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, TemplateSample 'deki grafik belirtimi marks.properties.update.fill.value için bir dolgu rengini kodlamaz; bunun yerine dolgu rengini {{{1|#ccc}}} olarak ayarlar. Bu nedenle, bu sayfayı ziyaret ederseniz veya parametresiz bir şekilde dönüştürürseniz, grafik #ccc ile doldurulur; ancak bu sayfayı yansıtma yaparsanız, ilk şablon parametresi olarak dolgu rengini belirtebilirsiniz.

{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}

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.

Copied from vega demo, which was modeled on this graph.

Yatay çubuk grafiği

Extension:Graph/Demo/HorizontalBarGraphSample

Doğrudan `‎<graph>` ile gömme

Bu örnek, geçerli sayfanın içindeki JSON grafiğini içeren bir ‎<graph> etiketidir.

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 ‎<graph> 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.