Extension:Graph/Etkileşimli Grafik Eğitimi 2

This page is a translated version of the page Extension:Graph/Interactive Graph Tutorial 2 and the translation is 100% complete.
Other languages:

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. Bu grafiğin kaynak kodu buradadır. Tam Vega belgeleri de ilginizi çekebilir.

Bu eğitimde, eğitimin ilk bölümden devam ediyoruz.

Bazı yararlı verilerle bir harita çizme

Kaydırıcıyı bu öğreticinin 1. bölümünde oluşturduğumuza göre, bir harita ekleyebilir ve vurgulayan verilerle karıştırabiliriz. İki veri kaynağına ihtiyacımız var. TopoJSON formatındaki harita viki işaretlemesinde burada saklanır ve bir CSV metni olarak depolanan doğurganlık verileri viki işaretleme, WorldBank adresinden kopyalanmıştır (lisans)

Her ülke bir ISO-3 ülke kodu ile etiketlenir. CSV verileri, her biri ayrı bir sütun olarak "country", "id" sütunlarının yanı sıra 1960..2013 yıllarını içerir.

  // Grafiğin boyutunu artırın:
  "width": 500,
  "height": 260,
  // 'marks' olarak, kaydırma çizgisi için 'x2' artırın:
  "x2": {"value": 500},

  // veri bölümünü ekleyin
  "data": [
    {
      "name": "highlights",
      "url": "wikiraw:///Extension:Graph/Demo/RawData:FertilityByCountryHistoric-csv",
      "format": {"type": "csv"},
      "transform": [
        {
          "type": "formula",
          "field": "v",
          // currentYear ile bir dizeye nüştürür ve tun adı olarak kullanır.
          // Dize değerini kayan nokta olarak ayrıştırın.
          "expr": "parseFloat(datum[''+currentYear])"
        }
      ]
    },
    {
      "name": "countries",
      "url": "wikiraw:///Extension:Graph/Demo/RawData:WorldMap-iso3-json",
      "format": {"type": "topojson","feature": "countries"},
      "transform": [
        {
          // harita verilerinin 'yol' işareti için yollara nüştürülmesi gerekir
          "type": "geopath",
          "value": "data",
          "scale": 80,
          "center": [-180,125],
          "translate": [0,0],
          "projection": "equirectangular"
        },
        {
          // Haritadaki her ülke kimliği için, vurgular tablosunda eşleşen bir giriş bulun ve bunu 'sıkıştırılmış' değer olarak ekleyin
          "type": "lookup",
          "keys": ["id"],
          "on": "highlights",
          "onKey": "id",
          "as": ["zipped"],
          "default": {"v": null, "country":"No data"}
        }
      ]
    }
  ],
  // renk ölçeği ekle
    {
      "name": "color",
      "type": "linear",
      "domain": {"data": "countries","field": "zipped.v"},
      "domainMin": 1,
      "zero": false,
      "range":  ["#FFEDBC", "#f83600"]
    }
  // harita göstermek için bir yol çizim işareti ekleyin
    {
      "name": "map",
      "type": "path",
      "from": {"data": "countries"},
      "properties": {
        "enter": {"path": {"field": "layout_path"}},
        "update": {
          "fill": [
            // dolgu rengi, 'color' ölçeği aracılığıyla bir renge nüştürülen 'countries' verilerinden doğurganlık oranını temsil etmeli ve veri olmadığında gri olmalıdır.
            // Karşılık gelen değerin bulunup bulunmadığını test ederiz ve eğer varsa onu kullanırız.
            // Testler 'if ... else-if ... else ...' gibidir
            {
              "test": "datum.zipped.v !== null",
              "scale": "color",
              "field": "zipped.v"
            },
            {"value": "grey"}
          ]
        },
        "hover": {"fill": {"value": "#989898"}}
      }
    }

Gösterge Ekleme

Kullanıcı renklerin sayılara nasıl karşılık geldiğini görürse grafik daha bilgilendirici olacaktır. Maalesef şu anda efsane yerleşimi biraz bozuk ve Vega'da düzeltilmesi gerekecek, ancak harita tabanlı olmayan grafiklerde çalışma eğilimindedir.

  // Bu bölümü kök nesneye ekleyin
  "legends": [
    {
      // 'color' is the name of the scale to show
      "fill": "color",
      "title": "Fertility",
      "offset": -300,
      "properties": {
        "gradient": {
          "stroke": {"value": "transparent"}
        },
        "title": {
          "fontSize": {"value": 14}
        },
        "legend": {
          "x": {"value": 0},
          "y": {"value": 180}
        }
      }
    }
  ],

Bazı istatistiklerin eklenmesi

Haritanın üzerine gelme olayı, ülkenin ve ilgili oranın sağ köşede görünmesine neden olur. { and } kaşlı ayraçlar yerine \u007b ve \u007d kullanımına dikkat edin. Bu grafik doğrudan ‎<graph> etiketinin içine yerleştirilirse buna gerek yoktur, ancak grafik {{ #tag:graph | ...graph definition... | mode=interactive }} ile birlikte kullanıldığında sorunları önler.

  // x ve y fare konumunu kaydeden bir sinyal ve bu belirli harita öğesini çizmek için kullanılan ilgili veri öğesini ekleyin.
  // xve y'yi kaydetmemiz gerekmediğine dikkat edin, ancak verinin değerini basitçe kullanabilirdik.
  // İstatistiklerle birlikte yüzen bir kutu görüntülemek için x,y koordinatlarının nasıl kullanılabileceğini göstermek için tutulur.
    {
      "name": "tooltipSignal",
      "init": {"expr": "{x: 0, y: 0, datum: {} }"}, 
      "streams": [
        {  
          "type": "@map:mouseover",    
          "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.zipped}"
        },
        {  
          "type": "@map:mouseout",
          "expr": "{x: 0, y: 0, datum: {} }"
        }
      ] 
    }

    // belirli bir ülkenin verilerinin değerini göstermek için bu işareti ekleyin
    {
      "type": "text",
      "properties": {
        "enter": {
          "x": {"value": 500},
          "y": {"value": 10},  
          "align": {"value": "right"},
          "fontSize": {"value": 17},
          "fill": {"value": "black"}
        },
        "update": {
          // şablon zengin değer biçimlendirmesine izin verir. Şablonlar {{...}} sözdizimini kullanır, bu da viki işaretlemesiyle çakıştığı anlana gelir, bu yüzden onu \u007b ve \u007d ile değiştiririz
          "text": {"template": "\u007b{tooltipSignal.datum.country}\u007d \u007b{tooltipSignal.datum.v}\u007d"}
        }
      }
    }