DataTable Grafikleri

ui.Chart işlevi, Google Grafikler DataTable sınıfıyla aynı yapıyı takip eden ancak DataTable yöntemleri ve değişkenliği olmayan istemci tarafı bir JSON nesnesinden grafikler oluşturur. Temel olarak, gözlemleri temsil eden satırları ve gözlem özelliklerini temsil eden sütunları olan 2 boyutlu bir tablodur. Earth Engine'da grafik oluşturmak için esnek ve temel bir arayüz sağlar. Yüksek derecede grafik özelleştirmesi gerektiğinde iyi bir seçenektir.

DataTable şeması

Earth Engine'da sözde DataTable tanımlamanın iki yolu vardır: JavaScript 2 boyutlu dizi ve JavaScript değişmez nesnesi. Çoğu uygulama için 2 boyutlu bir dizi oluşturmak en basit yaklaşım olacaktır. Her iki durumda da ui.Chart alanına iletilen tablo istemci tarafı bir nesne olmalıdır. Manuel olarak kodlanmış bir tablo doğal olarak istemci tarafında olur. Hesaplanmış bir nesnenin ise evaluate kullanılarak istemci tarafına aktarılması gerekir. Sunucu tarafı ve istemci tarafı nesneler arasındaki fark hakkında daha fazla bilgi için lütfen İstemci ve sunucu sayfasına bakın.

JavaScript dizisi

2 boyutlu DataTable, bir satır ve sütun dizisinden oluşur. Satırlar gözlemler, sütunlar ise özelliklerdir. İlk sütun x ekseninin değerlerini, ek sütunlar ise y ekseni serisinin değerlerini tanımlar. İlk satırın sütun başlığı olması beklenir. En basit üstbilgi, bir dizi sütun etiketidir. Bu etiketler, seçili eyaletlere göre nüfusu gösteren aşağıdaki DataTable dizisinde gösterilmiştir.

var dataTable = [
  ['State', 'Population'],
  ['CA', 37253956],
  ['NY', 19378102],
  ['IL', 12830632],
  ['MI', 9883640],
  ['OR', 3831074],
];

İsteğe bağlı olarak sütunlar, alan (x ekseni) ve verileri (y ekseni serisi) tanımlamak dışında bir role (ör. ek açıklama, aralıklar, ipuçları veya stil) atanabilir. Aşağıdaki örnekte, başlık dizisi her sütunun rolünün açıkça tanımlandığı bir nesne dizisi olarak sunulmaktadır. Her bir Google grafik türü için kabul edilen sütun rolleri, ilgili dokümanda (ör. sütun grafiği veri biçimi) bulunabilir.

var dataTable = [
  [{role: 'domain'}, {role: 'data'}, {role: 'annotation'}],
  ['CA', 37253956, '37.2e6'],
  ['NY', 19378102, '19.3e6'],
  ['IL', 12830632, '12.8e6'],
  ['MI', 9883640, '9.8e6'],
  ['OR', 3831074, '3.8e6'],
];

Sütun özellikleri aşağıdaki gibi belirtilir:

Parametre	Tür	Tanım
type	dize, önerilir	Sütun veri türü: 'string', 'number', 'boolean', 'date', 'datetime' veya 'timeofday'.
label	dize, önerilir	Sütun için bir etiket, grafik göstergesinde seri etiketi.
role	dize, önerilir	Sütun için bir rol (ör. sütun grafikleri için roller).
pattern	dize, isteğe bağlı	Sütun değerinin nasıl gösterileceğini belirten bir sayı (veya tarih) biçimi dizesi.

JavaScript nesnesi

DataTable, satır ve sütun nesnelerinin dizilerinin sağlandığı bir JavaScript değişmez nesnesi olarak biçimlendirilebilir. Sütun ve satır parametrelerini belirtmeyle ilgili talimatlar için bu kılavuza bakın.

var dataTable = {
  cols: [{id: 'name', label: 'State', type: 'string'},
         {id: 'pop', label: 'Population', type: 'number'}],
  rows: [{c: [{v: 'CA'}, {v: 37253956}]},
         {c: [{v: 'NY'}, {v: 19378102}]},
         {c: [{v: 'IL'}, {v: 12830632}]},
         {c: [{v: 'MI'}, {v: 9883640}]},
         {c: [{v: 'OR'}, {v: 3831074}]}]
};

Manuel DataTable grafiği

Bir grafikte görüntülemek istediğiniz az miktarda statik veriniz olduğunu varsayalım. ui.Chart işlevine iletilecek bir giriş oluşturmak için JavaScript dizi veya nesne özelliklerini kullanın. Burada, ABD'nin 2010 nüfus sayımından seçilen eyalet nüfusları, sütun özelliklerini tanımlayan sütun başlığı nesneleriyle bir JavaScript dizisi olarak kodlanmıştır. Üçüncü sütunun, 'annotation' rolüne atandığını unutmayın. Bu rol, nüfusu grafikteki her gözleme ek açıklama olarak ekler.

Kod Düzenleyici (JavaScript)

// Define a DataTable using a JavaScript array with a column property header.
var dataTable = [
  [
    {label: 'State', role: 'domain', type: 'string'},
    {label: 'Population', role: 'data', type: 'number'},
    {label: 'Pop. annotation', role: 'annotation', type: 'string'}
  ],
  ['CA', 37253956, '37.2e6'],
  ['NY', 19378102, '19.3e6'],
  ['IL', 12830632, '12.8e6'],
  ['MI', 9883640, '9.8e6'],
  ['OR', 3831074, '3.8e6']
];

// Define the chart and print it to the console.
var chart = ui.Chart(dataTable).setChartType('ColumnChart').setOptions({
  title: 'State Population (US census, 2010)',
  legend: {position: 'none'},
  hAxis: {title: 'State', titleTextStyle: {italic: false, bold: true}},
  vAxis: {title: 'Population', titleTextStyle: {italic: false, bold: true}},
  colors: ['1d6b99']
});
print(chart);

Hesaplanmış DataTable grafiği

Sunucudan evaluate aracılığıyla istemciye iletilen 2 boyutlu bir ee.List'den DataTable dizisi oluşturulabilir. Sık karşılaşılan bir senaryo, bir ee.FeatureCollection, ee.ImageCollection veya bunların öğe bazında azaltılmasının özelliklerini DataTable olarak dönüştürmektir. Aşağıdaki örneklerde uygulanan strateji, belirli bir öğeyi azaltan, azaltma sonuçlarından bir ee.List oluşturan ve listeyi döndürülen öğeye 'row' adlı bir özellik olarak ekleyen bir işlevi bir ee.ImageCollection ile eşler. Yeni koleksiyonun her öğesinde, DataTable içindeki bir satırı temsil eden 1 boyutlu bir ee.List bulunur. aggregate_array() işlevi, DataTable için gereken şekilde 2 boyutlu bir sunucu tarafı ee.List oluşturmak üzere tüm 'row' mülklerini bir üst ee.List altında toplamak için kullanılır. Tabloya özel bir sütun başlığı eklenir ve sonuç evaluate ile istemci tarafına aktarılır. Burada ui.Chart işlevi kullanılarak oluşturulur.

Not: Bir evaluate işlevi içinden yazdırılan grafikler, konsolda veya ui.Panel widget'ında "Grafiği oluşturma..." mesajını hemen göstermez. İsteğin yürütülmesini ve sonuçların istemciye aktarılmasını bekleyin.

Bölgeye göre zaman serisi

Bu örnekte, ormanlık bir eko bölge için MODIS'den türetilen NDVI ve EVI bitki örtüsü indekslerinin zaman serisi gösterilmektedir. Serideki her resim, eko bölgeye göre azaltılır ve sonuçları, istemciye aktarılmak ve ui.Chart ile grafik oluşturmak için DataTable olarak birleştirilen bir 'row' mülkü olarak birleştirilir. Bu snippet'in, ui.Chart.image.series grafik örneği tarafından oluşturulan grafikle aynı grafiği oluşturduğunu unutmayın.

Kod Düzenleyici (JavaScript)

// Import the example feature collection and subset the forest feature.
var forest = ee.FeatureCollection('projects/google/charts_feature_example')
                 .filter(ee.Filter.eq('label', 'Forest'));

// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/061/MOD13A1')
                     .filter(ee.Filter.date('2010-01-01', '2020-01-01'))
                     .select(['NDVI', 'EVI']);

// Define a function to format an image timestamp as a JavaScript Date string.
function formatDate(img) {
  var millis = img.date().millis().format();
  return ee.String('Date(').cat(millis).cat(')');
}

// Build a feature collection where each feature has a property that represents
// a DataFrame row.
var reductionTable = vegIndices.map(function(img) {
  // Reduce the image to the mean of pixels intersecting the forest ecoregion.
  var stat = img.reduceRegion(
      {reducer: ee.Reducer.mean(), geometry: forest, scale: 500});

  // Extract the reduction results along with the image date.
  var date = formatDate(img);   // x-axis values.
  var evi = stat.get('EVI');    // y-axis series 1 values.
  var ndvi = stat.get('NDVI');  // y-axis series 2 values.

  // Make a list of observation attributes to define a row in the DataTable.
  var row = ee.List([date, evi, ndvi]);

  // Return the row as a property of an ee.Feature.
  return ee.Feature(null, {'row': row});
});

// Aggregate the 'row' property from all features in the new feature collection
// to make a server-side 2-D list (DataTable).
var dataTableServer = reductionTable.aggregate_array('row');

// Define column names and properties for the DataTable. The order should
// correspond to the order in the construction of the 'row' property above.
var columnHeader = ee.List([[
  {label: 'Date', role: 'domain', type: 'date'},
  {label: 'EVI', role: 'data', type: 'number'},
  {label: 'NDVI', role: 'data', type: 'number'}
]]);

// Concatenate the column header to the table.
dataTableServer = columnHeader.cat(dataTableServer);

// Use 'evaluate' to transfer the server-side table to the client, define the
// chart and print it to the console.
dataTableServer.evaluate(function(dataTableClient) {
  var chart = ui.Chart(dataTableClient).setOptions({
    title: 'Average Vegetation Index Value by Date for Forest',
    hAxis: {
      title: 'Date',
      titleTextStyle: {italic: false, bold: true},
    },
    vAxis: {
      title: 'Vegetation index (x1e4)',
      titleTextStyle: {italic: false, bold: true}
    },
    lineWidth: 5,
    colors: ['e37d05', '1d6b99'],
    curveType: 'function'
  });
  print(chart);
});

Aralık grafiği

Bu grafik, aralık grafiği oluşturmak için DataTable sütunu 'role' özelliğinden yararlanır. Grafikte, Kaliforniya'nın Monterey kenti yakınlarındaki bir piksel için yıllık NDVI profili ve yıllık varyans gösterilmektedir. Yıllar arası medyan bir çizgi olarak sunulurken mutlak ve çeyrek aralıkları bant olarak gösterilir. Her aralığı temsil eden tablo sütunları, 'role' sütun özelliği 'interval' olarak ayarlanarak bu şekilde atanır. intervals.style grafik özelliği 'area' olarak ayarlanarak bantlar orta çizginin etrafında çizilir.

Kod Düzenleyici (JavaScript)

// Define a point to extract an NDVI time series for.
var geometry = ee.Geometry.Point([-121.679, 36.479]);

// Define a band of interest (NDVI), import the MODIS vegetation index dataset,
// and select the band.
var band = 'NDVI';
var ndviCol = ee.ImageCollection('MODIS/006/MOD13Q1').select(band);

// Map over the collection to add a day of year (doy) property to each image.
ndviCol = ndviCol.map(function(img) {
  var doy = ee.Date(img.get('system:time_start')).getRelative('day', 'year');
  // Add 8 to day of year number so that the doy label represents the middle of
  // the 16-day MODIS NDVI composite.
  return img.set('doy', ee.Number(doy).add(8));
});

// Join all coincident day of year observations into a set of image collections.
var distinctDOY = ndviCol.filterDate('2013-01-01', '2014-01-01');
var filter = ee.Filter.equals({leftField: 'doy', rightField: 'doy'});
var join = ee.Join.saveAll('doy_matches');
var joinCol = ee.ImageCollection(join.apply(distinctDOY, ndviCol, filter));

// Calculate the absolute range, interquartile range, and median for the set
// of images composing each coincident doy observation group. The result is
// an image collection with an image representative per unique doy observation
// with bands that describe the 0, 25, 50, 75, 100 percentiles for the set of
// coincident doy images.
var comp = ee.ImageCollection(joinCol.map(function(img) {
  var doyCol = ee.ImageCollection.fromImages(img.get('doy_matches'));

  return doyCol
      .reduce(ee.Reducer.percentile(
          [0, 25, 50, 75, 100], ['p0', 'p25', 'p50', 'p75', 'p100']))
      .set({'doy': img.get('doy')});
}));

// Extract the inter-annual NDVI doy percentile statistics for the
// point of interest per unique doy representative. The result is
// is a feature collection where each feature is a doy representative that
// contains a property (row) describing the respective inter-annual NDVI
// variance, formatted as a list of values.
var reductionTable = comp.map(function(img) {
  var stats = ee.Dictionary(img.reduceRegion(
      {reducer: ee.Reducer.first(), geometry: geometry, scale: 250}));

  // Order the percentile reduction elements according to how you want columns
  // in the DataTable arranged (x-axis values need to be first).
  var row = ee.List([
    img.get('doy'),            // x-axis, day of year.
    stats.get(band + '_p50'),  // y-axis, median.
    stats.get(band + '_p0'),   // y-axis, min interval.
    stats.get(band + '_p25'),  // y-axis, 1st quartile interval.
    stats.get(band + '_p75'),  // y-axis, 3rd quartile interval.
    stats.get(band + '_p100')  // y-axis, max interval.
  ]);

  // Return the row as a property of an ee.Feature.
  return ee.Feature(null, {row: row});
});

// Aggregate the 'row' properties to make a server-side 2-D array (DataTable).
var dataTableServer = reductionTable.aggregate_array('row');

// Define column names and properties for the DataTable. The order should
// correspond to the order in the construction of the 'row' property above.
var columnHeader = ee.List([[
  {label: 'Day of year', role: 'domain'},
  {label: 'Median', role: 'data'},
  {label: 'p0', role: 'interval'},
  {label: 'p25', role: 'interval'},
  {label: 'p75', role: 'interval'},
  {label: 'p100', role: 'interval'}
]]);

// Concatenate the column header to the table.
dataTableServer = columnHeader.cat(dataTableServer);

// Use 'evaluate' to transfer the server-side table to the client, define the
// chart and print it to the console.
dataTableServer.evaluate(function(dataTableClient) {
  var chart = ui.Chart(dataTableClient).setChartType('LineChart').setOptions({
    title: 'Annual NDVI Time Series with Inter-Annual Variance',
    intervals: {style: 'area'},
    hAxis: {
      title: 'Day of year',
      titleTextStyle: {italic: false, bold: true},
    },
    vAxis: {title: 'NDVI (x1e4)', titleTextStyle: {italic: false, bold: true}},
    colors: ['0f8755'],
    legend: {position: 'none'}
  });
  print(chart);
});

Aralıkları göstermenin birçok yolu vardır. Aşağıdaki örnekte, intervals.style özelliği ilgili kutu stiliyle 'boxes' olarak değiştirilerek bantlar yerine kutular kullanılmıştır.

dataTableServer.evaluate(function(dataTableClient) {
  var chart = ui.Chart(dataTableClient).setChartType('LineChart').setOptions({
    title: 'Annual NDVI Time Series with Inter-Annual Variance',
    intervals: {style: 'boxes', barWidth: 1, boxWidth: 1, lineWidth: 0},
    hAxis: {
      title: 'Day of year',
      titleTextStyle: {italic: false, bold: true},
    },
    vAxis: {title: 'NDVI (x1e4)', titleTextStyle: {italic: false, bold: true}},
    colors: ['0f8755'],
    legend: {position: 'none'}
  });
  print(chart);
});