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

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) We need two sources of data - the map in TopoJSON format is stored in wiki markup here, and the fertility data that is stored as a CSV text in wiki markup, copied from WorldBank (license)

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. The CSV data contains "country", "id" columns, as well as years 1960..2013, each as a separate column.

  // 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 dönüştürür ve sü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 dö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"]
    }
  // haritayı 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 dö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ığı anlamına gelir, bu yüzden onu \u007b ve \u007d ile değiştiririz
          "text": {"template": "\u007b{tooltipSignal.datum.country}\u007d \u007b{tooltipSignal.datum.v}\u007d"}
        }
      }
    }