Görselleştirme Düzenleyicisi

Bir gereçteki gereç yapılandır simgesini (kalem) tıklatarak Görselleştirme Düzenleyicisi ' ndeki gereçleri düzenleyebilirsiniz. Bunu daha sonra Düzenleyici 'de ya da JSON kodunu düzenleyerek özelleştirebilirsiniz.

Düzenleyicide, pencere aracınızın adını kolayca değiştirebilir ve Görselleştirme görünümündegörüntülenmesini istediğiniz veri kaynağını seçebilirsiniz.

Görselleştirme Düzenleyicisi' nde bir pencere öğesini değiştirdiğinizde, değişikliklerinizi de gösteren bir önizleme görüntülenir. Daha sonra Tamam düğmesini tıklatarak değişikliklerinizi kaydetmeyi seçebilirsiniz; bu da Görselleştirme Düzenleyicisi' nin kapatılır ya da değişikliklerinizi iptal etmek için İptal düğmesini tıklatabilirsiniz.

JSON düzenleyicisi size daha gelişmiş düzenleme olanakları sağlar. JSON pencere bileşeni sözdizimiyle ilgili daha fazla bilgi için şu bölüme bakın: Visualization widgets Syntax.

Görselleştirme görünümünüzü bir JSON dosyası olarak, tanımları ve verileri içeren bir JSON dosyası olarak karşıdan yükleyebilir ve bulgularınızı işbirlikçlerinizle paylaşmanızı kolaylaştırabilirsiniz.

Görselleştirme sayfaları

Farklı senaryolar için farklı sayfalar oluşturabilir ya da senaryoları aynı sayfada birleştirebilirsiniz.

Artı işaretini çift tıklatarak sayfalar ekleyebilirsiniz. Daha sonra her sayfada görüntülenenleri özelleştirebilirsiniz.

Bir sayfayı düzenlemek için Düzenle (kalem) simgesini tıklatın. Görselleştirme Düzenleyicisi ' nde sayfa adını düzenleyebilir, sayfaları yeniden sıralayabilir ve sayfalar ekleyebilirsiniz. Görselleştirme Düzenleyicisi ' nde Tamam düğmesini tıklatırsanız, güncellemeleriniz saklanır ve düzenleyiciyi kapatılır. Ya da değişikliklerinizi iptal etmek için İptal düğmesini seçebilirsiniz.

Bir sayfayı silmek için, sayfa sekmesini tıklatın ve etikette bir sil düğmesi görüntülenir.

Tablo arama ve süzme

You can filter tables (in both Verileri hazırla görünüm and the Görselleştirme görünümü) by clicking the search icon and entering a value to search on. Ayrıca, bir kolon adı, iki nokta üst üste işareti ve bir değer belirtebilirsiniz. Örneğin, diet_food_nutrients tablo arama alanına food:hot değerini girerseniz, tablo yalnızca "sıcak" yiyecek içeren satırları görüntülere göre süzülmüş olur. In this example, you obtain just one row that contains the food Hotdog. Ayrıca, bir sütun adının önekini de girebilirsiniz. Örneğin, fo:hot girilirken, food:hotile aynı sonuç elde eder. Kolon adı isteğe bağlıdır; bu nedenle, bu durumda hot değerini de girebilirsiniz. Kolon adı belirtilmediyse, tüm kolonlar aranır ve ilgili satırlar alınır. For example, if you enter 0, in the diet_food_nutrients table you obtain four rows that contain this value in one of the columns. Sayısal değerleri aşağıdaki gibi kullanarak da süzgeçten geçirebilirsiniz:

Görselleştirme pencere bileşenleri sözdizimi

Pencere bileşeni sözdizimi, pencere araçlarını JSON düzenleyicisi tarafından sağlanan işlevselliğin ötesinde özelleştirmek için kullanışlı olabilir.

Temel pencere bileşeni sözdizimi aşağıdaki gibidir:

{
  "name": "Widget Title",
  "type": "WidgetType",
  "props": {}
}

Tablolar ve grafikler gibi verilere bağlı pencere araçlarına ilişkin temel pencere bileşeni sözdizimi aşağıdaki gibidir:

{
  "name": "Table Cars",
  "type": "Table",
  "props": {
    "container": "",
    "data": "cars",
    "spec": {},
    "search": ""
  }
}

Notes pencere bileşeni belirtimleri

Notes pencere bileşeni, aşağıdaki kod örneğinde gösterildiği gibi, bir post-it notu olarak biçimlendirilebilir:

{
  "name": "Notes",
  "type": "Notes",
  "props": {
    "notes": "My post-it note",
    "style": {
      "background": "#ffe"
    },
    "headerStyle": {
      "background": "#ffe"
    }
  }
}

Bu stil örneği diğer pencere öğeleri için geçerlidir.

Tablo pencere bileşeni belirtimleri

Tablo pencere bileşeni belirtimleri, bu sözdizimini izleyen sütunların bir listesinden oluşur:

{
  "name": "Table Cars",
  "type": "Table",
  "property": "Acceleration",
  "label": "Acceleration",
  "type": "Number",
  "visible": true,
  "width": 100,
  "style": {}
}

Çizelgelerin görsel olarak gerçekleştirilmesini aşağıdaki öğeleri kullanarak uyarlayabilirsiniz:

Arama ve süzme özelliği tablolarda kullanılabilir. Bir tablodaki içeriği aramak için arama simgesini tıklatın. Aramanıza özel bir önek ekleyerek, aramanızı belirli bir sütuna göre sınırlayabilirsiniz: "column heading":"search"; örneğin, name:chevrolet. x-x aralığında olan değerleri aramak için 10..20değerini kullanın. Ayrıca, x 'ten büyük değerleri (örneğin, 10..) ve x 'ten küçük değerleri (örneğin, ..20) de arayabilirsiniz. Tablo süzme ile ilgili daha fazla bilgi için bkz. Tablo arama ve süzme.

Grafik pencere bileşenleri

İki tip grafik pencere bileşeni kullanabilirsiniz: Vega Grafikleri ve Grafikler. Bu Grafik pencere bileşeni düzenleyicilerini açtığınızda farklı grafik tipleri kullanılabilir.

Vega Grafiği pencere bileşeni belirtimleri

Vega Grafiği pencere bileşeni, farklı grafik tipleri (çubuk grafikler, nokta grafikler vb.) oluşturmak için Vega-Lite belirtimlerini kullanır. spec boş bırakılırsa, x ekseninde ilk dizgi sütunu ve y ekseninde ilk sayı ile basit bir çubuk grafik otomatik olarak oluşturulur.

Vega-Lite, veri süzme ve dönüştürme olanağı sağlar. Örneğin, dizeler tarihlere dönüştürülebilmektedir.

Vega-Lite hakkında daha fazla bilgi edinmek için bkz. Vega-Lite-Bir Yüksek Düzeyde Görselleştirme Dilbilgisi.

Aşağıda, bir popülasyon verileri tablosuna dayalı olarak gruplanmış bir çubuk grafiğin gelişmiş bir örneği yer alır. Bu örnek, verilerin nasıl süzgeçten geçireceğini ve sanal bir sütunun nasıl hesaplanacağını gösterir:

{
  "name": "Population Grouped Bar Chart",
  "type": "Chart",
  "props": {
    "data": "population",
    "spec": {
      "transform": [
        {
          "filter": "datum.year == 2000"
        },
        {
          "calculate": "datum.sex == 2 ? 'Female' : 'Male'",
          "as": "gender"
        }
      ],
      "mark": "bar",
      "encoding": {
        "column": {
          "field": "age",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "sum",
          "field": "people",
          "type": "quantitative",
          "axis": {
            "title": "population",
            "grid": false
          }
        },
        "x": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "rangeStep": 12
          },
          "axis": {
            "title": ""
          }
        },
        "color": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "range": [
              "#EA98D2",
              "#659CCA"
            ]
          }
        }
      },
      "config": {
        "facet": {
          "cell": {
            "strokeWidth": 0
          }
        },
        "axis": {
          "domainWidth": 1
        }
      }
      }
    }
  }

Gantt grafiği pencere bileşeni

Gantt grafikleri, Modelleme Yardımcısıile oluşturulan sorunları zamanlama sorunlarına ilişkin çözümü görüntülemek için otomatik olarak oluşturulur. Ancak Gantt pencere aracını kullanarak anlamlı olduğu herhangi bir veri için Gantt grafiklerini düzenleyebilir, oluşturabilir ve yapılandırabilirsiniz. Kalem simgesini tıklatarak ve JSON bölmesini seçerek bunun için JSON düzenleyicisini kullanın.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": "$cognitive-gantt",
    "spec": {},
    "search": ""
  }
}

  "data": [
    "resourcesTableName",
    "activitiesTableName",
    "reservationsTableName"
  ],

  "resources": {
    "data": "resourcesTableName",
    "id": "id",
    "parent": "parent",
    "name": "name"
  },
  "activities": {
    "data": "activitiesTableName",
    "id": "id",
    "name": "name",
    "start": "start",
    "end": "end",
    "parent": "parent"
  },
  "reservations": {
    "data": "reservationsTableName",
    "activity": "activity",
    "resource": "resource"
  },

Belirtimde de tanımlamanız gereken başka bir zorunlu alan da, tüm ortak tarih biçimlerinin gerçek tarihlere dönüştürülebilmesi için dateFormat ' dir. Bazı ortak tarih biçimleri, örneğin 'yyyy-MM-dd', 'yyyy-MM-dd HH:mm:ss', vb. gibi. Örneğin, Epoch zaman için S milisaniyecileri de kullanabilirsiniz; örneğin, "dateFormat": "S". dateFormat , "activity" tablolarının "start" ve "end" alanlarıyla eşleşmelidir.

The error message Zaman aralığı tanımlanmadı is displayed until you define the activity table, with start and end fields that use the specified dateFormat.

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations"
    ],
    "spec": {
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

{
  "name": "",
  "type": "Gantt",
  "props": {
    "container": "",
    "data": [
      "resources",
      "activities",
      "reservations",
      "constraints"
    ],
    "spec": {
      "type": "ActivityChart",
      "resources": {
        "data": "resources",
        "id": "id",
        "parent": "parent",
        "name": "name"
      },
      "activities": {
        "data": "activities",
        "id": "id",
        "name": "name",
        "start": "start",
        "end": "end",
        "parent": "parent"
      },
      "constraints": {
        "data": "constraints",
        "from": "from",
        "to": "to",
        "type": "type"
      },
      "reservations": {
        "data": "reservations",
        "activity": "activity",
        "resource": "resource"
      },
      "dateFormat": "S",
      "resourceQuantity": "quantity"
    },
    "search": ""
  }
}

The error message Zaman aralığı tanımlanmadı is displayed until you define the activity table, with start and end fields that use the specified dateFormat.

Daha fazla bilgi

Diğer grafik türü için bkz. Verilerinizi görselleştirme.