Extension:Graph/Etkileşimli Grafik Eğitimi
Bu sayfa eski. |
Bu eğitimde, ülke başına geçmiş doğurganlık oranlarını, yılı seçmek için bir kaydırıcıyı ve dünya genelindeki oran dağılımını gösteren bir haritayı gösteren etkileşimli bir grafik oluşturacağız. Yalnızca bu grafiğin kaynak kodunu araştırmak istiyorsanız, ayrı bir viki sayfası olarak mevcuttur. Deneyler için Etkileşimli Grafik Deneme Tahtası'nı kullanın. Eksiksiz Vega belgeleri de ilginizi çekebilir. If you want to investigate the source code of this graph only, it's available as a separate wiki page. Use Interactive Graph Sandbox for experimentations. You might also be interested in the complete Vega documentation.
Move the slider to change the year, and hover the mouse over countries to read the rate. Try it !
Çizim Şekilleri
Birkaç öğe çizerek başlıyoruz (markaları).
Grafik henüz etkileşimli olmasa da, grafik kodu <graph mode=interactive>...</graph> etiketiyle çevrilidir.
Etkileşimli Grafik Deneme Tahtası'nı açın ve denemek için aşağıdaki kodu & lt;graph> etiketi olmadan kopyalayın.
İpucu: Grafik özelliklerini deneme amacıyla Vega Editor'e kopyalamak için "kaynağı düzenle" seçeneğini kullanın.
| kaynak koduna bakın |
{
// Vega 2'yi kullanmak ve resim boyutunu belirtmek istiyoruz
"version": 2, "width": 300, "height": 80,
// Dolguyu her tarafta aynı değere ayarlayın
"padding": 12,
// Varsayılan olarak arka plan şeffaftır
"background": "#edf1f7",
"marks": [
{
// Yatay bir çizgi çizin
"name": "scrollLine",
"type": "rule",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 40},
"x2": {"value": 300},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 2}
}
}
},
{
// Üzerine gelme efektli bir üçgen şekil çizin
// nesneleri adlandırmak, onlara daha sonra kaynaklanmasına sağlar
"name": "handle",
"type": "path",
"properties": {
"enter": {
"x": {"value": 200},
"y": {"value": 40},
// yol sözdizimi, SVG'nin yol etiketiyle aynıdır
"path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"},
"stroke": {"value": "#880"},
"strokeWidth": {"value": 2.5}
},
"update": {"fill": {"value": "#fff"}},
// Fareyle üzerine gelindiğinde nesnenin dolgu rengini değiştirin
"hover": {"fill": {"value": "#f00"}}
}
}
]
}
IsDragging sinyali
Tutamaç nesnemizi sürüklenebilir yapmak için, önce tıklanıp tıklanmadığını bulmamız gerekir. Bunun için, bir nesneye tıklandığında (isDragging) gerçek olan bir sinyali ve sonucu göstermek (hata ayıklamak) için bir metin işareti ekleyelim:
| kaynak koduna bakın |
"signals": [
{
"name": "isDragging",
"init": false,
"streams": [
{"type": "@handle:mousedown","expr": "true"},
{"type": "mouseup","expr": "false"}
]
},
],
// "markalar" da
{
"name": "debugIsDragging",
"type": "text",
"properties": {
"enter": {
"x": {"value": 250},
"y": {"value": 0},
"fill": {"value": "black"}
},
"update": {"text": {"signal": "isDragging"}}
}
}
Tutamak Pozisyon sinyali
Artık nesnenin ne zaman sürüklendiğini bildiğimize göre, değerini yalnızca isDragging sinyali doğru olduğunda değiştiren bir mousemove sinyali ekliyoruz.
Yeni sinyali ayrıca "update" bölümü üzerinden tutamacın "x" koordinatına ekleriz:
| kaynak koduna bakın |
// "sinyaller" de
{
"name": "handlePosition",
"init": 200,
"streams": [
{
"type": "mousemove[isDragging]",
"expr": "eventX()"
}
]
}
// "markalar" da ekleyin
{
"name": "handle",
...
"update": {
"x": {"signal": "handlePosition"},
...
},
},
{
"name": "debugHandlePosition",
"type": "text",
"properties": {
"enter": {
"x": {"value": 250},
"y": {"value": 14},
"fill": {"value": "black"}
},
"update": {"text": {"signal": "handlePosition"}}
}
}
Ölçekleme Kolu Konum sinyali
İşleyicinin piksel konumuna sahip olmak çok iyi değildir. Grafiğimiz için anlamlı bir konuma sahip olmayı tercih ederiz, ör. bir yıl. Vega ölçekleri, verilerimiz (ör. yıllar) ile ekran koordinatları ve geri (ters çevirme) arasında dönüştürme yapmak için yararlı bir mekanizma sağlar. Bu adımda, 1960..2013 değerleri için "yearScale" doğrusal ölçeğini ekleyerek grafiğin tüm genişliğine eşleştiriyoruz (dolgu hariç). Ayrıca, farenin X konumundan yıllar cinsinden anlamlı değere çeviren yeni bir scaledHandlePosition sinyali ekledik.
| kaynak koduna bakın |
// "ölçekler" kök değerini ekleyin:
"scales": [
{
"name": "yearsScale",
"type": "linear",
"zero": false,
"domain": [1960, 2013],
"range": "width"
}
],
// "sinyaller" de şunu ekleyin:
{
"name": "scaledHandlePosition",
"expr": "handlePosition",
"scale": {"name": "yearsScale","invert": true}
}
// "markalar" da ekleyin
{
"name": "debugScaledHandlePosition",
"type": "text",
"properties": {
"enter": {
"x": {"value": 250},
"y": {"value": 28},
"fill": {"value": "black"}
},
"update": {"text": {"signal": "scaledHandlePosition"}}
}
}
Yıl değeri temizleme
Fark etmiş olabileceğiniz gibi, tutamaç grafiğimizin uzunluğunun ötesine taşınarak yanlış sonuçlar üretebilir. Ayrıca ölçeklenmiş değer, yıl değerinden beklediğimiz bir tam sayı değildir. Bunu düzeltmek için, onu bir tam sayıya dönüştürmek ve gerekli aralıkla sınırlamak için "currentYear" adında bir işlem sonrası sinyali daha ekleyebiliriz. Ayrıca onu makul bir değere başlatırız ve hem "yearLabel" hem de gidonun konumunu bu değere geri bağlarız. Tutamacın konumunun ekran koordinatlarında olması gerektiğine dikkat edin, bu nedenle değeri geri dönüştürmek için "yearScale" kullanmalıyız:
| kaynak koduna bakın |
// Yeni sinyal:
{
"name": "currentYear",
"init": 2000,
"expr": "clamp(parseInt(scaledHandlePosition),1960,2013)"
}
// yearLabel markayı güncelleyin:
// Yılı çizmek için yeni marka
{
"name": "yearLabel",
"type": "text",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 25},
"fontSize": {"value": 32},
"fontWeight": {"value": "bold"},
"fill": {"value": "steelblue"}
},
"update": {"text": {"signal": "currentYear"}}
}
},
// İşleme markayı güncelleyin:
{
"name": "handle",
"properties": {
"update": {
"x": {"scale": "yearsScale","signal": "currentYear"}
},
}
}
Son temizlik
Artık tüm hata ayıklama işaretlerini kaldırabiliriz. Ayrıca ayrı handlePosition ve scaledHandlePosition sinyallerine ihtiyacımız yok çünkü ölçekleme aynı adımda gerçekleşebilir:
| kaynak koduna bakın |
{
// We want to use Vega 2, and specify image size
"version": 2, "width": 300, "height": 80,
// Set padding to the same value on all sides
"padding": 12,
// By default the background is transparent
"background": "#edf1f7",
"signals": [
{
"name": "isDragging",
"init": false,
"streams": [
{"type": "@handle:mousedown","expr": "true"},
{"type": "mouseup","expr": "false"}
]
},
{
"name": "scaledHandlePosition",
"streams": [
{
"type": "mousemove[isDragging]",
"expr": "eventX()",
"scale": {"name": "yearsScale","invert": true}
}
]
},
{
"name": "currentYear",
"init": 2000,
"expr": "clamp(parseInt(scaledHandlePosition),1960,2013)"
}
],
"scales": [
{
"name": "yearsScale",
"type": "linear",
"zero": false,
"domain": [1960, 2013],
"range": "width"
}
],
"marks": [
{
// draw the year label in the upper left corner
"name": "yearLabel",
"type": "text",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 25},
"fontSize": {"value": 32},
"fontWeight": {"value": "bold"},
"fill": {"value": "steelblue"}
},
"update": {"text": {"signal": "currentYear"} }
}
},
{
// Draw a horizontal line
"name": "scrollLine",
"type": "rule",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 40},
"x2": {"value": 300},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 2}
}
}
},
{
// Draw a triangle shape with a hover effect
// naming objects allows us to reference them later
"name": "handle",
"type": "path",
"properties": {
"enter": {
"y": {"value": 40},
// path syntax is the same as SVG's path tag
"path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"},
"stroke": {"value": "#880"},
"strokeWidth": {"value": 2.5}
},
"update": {
"x": {"scale": "yearsScale","signal": "currentYear"},
"fill": {"value": "#fff"}
},
// Change fill color of the object on mouse hover
"hover": {"fill": {"value": "#f00"} }
}
}
]
}
Sonraki Adım
Lütfen 2. bölüm ile devam edin