Grafici DataTable

La funzione ui.Chart visualizza i grafici da un oggetto JSON lato client che segue la stessa struttura della classe DataTable di Google Charts, ma non dispone dei metodi e della mutabilità di DataTable. Si tratta essenzialmente di una tabella 2D con righe che rappresentano le osservazioni e colonne che rappresentano gli attributi delle osservazioni. Fornisce un'interfaccia di base flessibile per la creazione di grafici in Earth Engine. È un'opzione valida quando è richiesto un elevato grado di personalizzazione del grafico.

DataTable schema

Esistono due modi per definire un pseudo-DataTable in Earth Engine: un array 2D JavaScript e un oggetto letterale JavaScript. Per la maggior parte delle applicazioni, la creazione di un array 2D sarà l'approccio più semplice. In entrambi i casi, la tabella passata a ui.Chart deve essere un oggetto lato client. Una tabella codificata manualmente sarà intrinsecamente lato client, mentre un oggetto calcolato dovrà essere trasferito lato client utilizzando evaluate. Per saperne di più sulla distinzione tra oggetti lato client e lato server, consulta la pagina Client e server.

Array JavaScript

Un DataTable 2D è composto da un array di righe e colonne. Le righe sono osservazioni e le colonne sono attributi. La prima colonna definisce i valori per l'asse x, mentre le colonne aggiuntive definiscono i valori per le serie dell'asse y. La prima riga deve essere un'intestazione di colonna. L'intestazione più semplice è una serie di etichette di colonna, come mostrato nel seguente array DataTable relativo alla popolazione per stati selezionati.

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

Facoltativamente, le colonne possono essere designate per un ruolo diverso dalla definizione del dominio (asse X) e dei dati (serie dell'asse Y), ad esempio annotazioni, intervalli, descrizioni comando o stile. Nell'esempio seguente, l'array di intestazioni è presentato come una serie di oggetti, in cui il ruolo di ogni colonna è definito esplicitamente. I ruoli delle colonne accettabili per ogni tipo di grafico Google sono disponibili nella rispettiva documentazione, ad esempio Formato dei dati del grafico a colonne.

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'],
];

Le proprietà delle colonne sono specificate come segue:

Parametro Tipo Definizione
type stringa, consigliata Tipo di dati della colonna: 'string', 'number', 'boolean', 'date', 'datetime' o 'timeofday'.
label stringa, consigliata Un'etichetta per la colonna, l'etichetta della serie nella legenda del grafico.
role stringa, consigliata Un ruolo per la colonna (ad es. ruoli per il grafico a colonne).
pattern stringa, facoltativo Una stringa di formato numerico (o data) che specifica come visualizzare il valore della colonna.

Oggetto JavaScript

Un DataTable può essere formattato come oggetto letterale JavaScript in cui vengono forniti array di oggetti riga e colonna. Consulta questa guida per istruzioni su come specificare i parametri di riga e colonna.

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}]}]
};

Grafico DataTable manuale

Supponiamo che tu abbia una piccola quantità di dati statici da visualizzare in un grafico. Utilizza le specifiche dell'array o dell'oggetto JavaScript per creare un input da passare alla funzione ui.Chart. Qui, le popolazioni degli stati selezionate del censimento degli Stati Uniti del 2010 sono codificate come array JavaScript con oggetti intestazione di colonna che definiscono le proprietà delle colonne. Tieni presente che la terza colonna è designata per il ruolo di 'annotation', che aggiunge la popolazione come annotazione a ogni osservazione nel grafico.

Editor di codice (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);

Grafico DataTable calcolato

È possibile creare un array DataTable da un ee.List 2D passato dal server al client tramite evaluate. Uno scenario comune è convertire le proprietà di un ee.FeatureCollection, ee.ImageCollection o di una riduzione elemento per elemento di questi in un DataTable. La strategia applicata nei seguenti esempi mappa una funzione su un ee.ImageCollection che riduce l'elemento specificato, assembla un ee.List dai risultati della riduzione e allega l'elenco come proprietà denominata 'row' all'elemento restituito. Ogni elemento della nuova raccolta ha un ee.List 1D che rappresenta una riga in un DataTable. La funzione aggregate_array() viene utilizzata per aggregare tutte le proprietà 'row' in un ee.List principale per creare un ee.List lato server 2D nella forma richiesta per DataTable. Un'intestazione di colonna personalizzata viene concatenata alla tabella e il risultato viene trasferito lato client con evaluate, dove viene visualizzato utilizzando la funzione ui.Chart.

Serie temporali per regione

Questo esempio mostra una serie temporale di indici di vegetazione NDVI ed EVI ricavati da MODIS per un'ecoregione boschiva. Ogni immagine della serie viene ridotta in base all'ecoregione e i relativi risultati vengono assemblati come proprietà 'row' aggregata in un DataTable da passare al client e da rappresentare con ui.Chart. Tieni presente che questo snippet produce lo stesso grafico generato dall'esempio di grafico ui.Chart.image.series.

Editor di codice (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);
});

Grafico a intervalli

Questo grafico sfrutta la proprietà 'role' della colonna DataTable per generare un grafico ad intervalli. Il grafico mette in relazione il profilo NDVI annuale e la varianza interannuale per un pixel vicino a Monterey, in California. La mediana interannuale è presentata come una linea, mentre gli intervalli assoluto e interquartile sono mostrati come bande. Le colonne della tabella che rappresentano ogni intervallo vengono assegnate come tali impostando la proprietà della colonna 'role' su 'interval'. Le bande vengono disegnate attorno alla linea mediana impostando la proprietà intervals.style del grafico su 'area'.

Editor di codice (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);
});

Esistono molti modi per rappresentare gli intervalli. Nell'esempio seguente, vengono utilizzati i riquadri anziché le bande modificando la proprietà intervals.style in 'boxes' con lo stile del riquadro rispettivo.

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);
});