Graphiques DataTable

La fonction ui.Chart affiche des graphiques à partir d'un objet JSON côté client qui suit la même structure que la classe DataTable de Google Charts, mais ne dispose pas des méthodes et de la mutabilité DataTable. Il s'agit essentiellement d'un tableau 2D avec des lignes représentant les observations et des colonnes représentant les attributs d'observation. Il fournit une interface de base flexible pour la création de graphiques dans Earth Engine. Il s'agit d'une bonne option lorsque vous avez besoin d'un niveau de personnalisation élevé pour vos graphiques.

DataTable schéma

Il existe deux méthodes pour définir un pseudo-DataTable dans Earth Engine: un tableau 2D JavaScript et un objet littéral JavaScript. Pour la plupart des applications, la construction d'un tableau à deux dimensions est l'approche la plus simple. Dans les deux cas, la table transmise à ui.Chart doit être un objet côté client. Une table codée manuellement sera intrinsèquement côté client, tandis qu'un objet calculé devra être transféré côté client à l'aide de evaluate. Pour en savoir plus sur la distinction entre les objets côté serveur et côté client, consultez la page Client par rapport au serveur.

Tableau JavaScript

Un DataTable 2D se compose d'un tableau de lignes et de colonnes. Les lignes correspondent aux observations et les colonnes aux attributs. La première colonne définit les valeurs de l'axe des X, tandis que les colonnes supplémentaires définissent les valeurs des séries de l'axe des Y. La première ligne doit être un en-tête de colonne. L'en-tête le plus simple est une série d'étiquettes de colonne, comme illustré dans le tableau DataTable suivant qui indique la population par État sélectionné.

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

Si vous le souhaitez, vous pouvez attribuer aux colonnes un rôle autre que la définition du domaine (axe X) et des données (série de l'axe Y), par exemple une annotation, des intervalles, des info-bulles ou un style. Dans l'exemple suivant, le tableau d'en-tête est présenté sous la forme d'une série d'objets, où le rôle de chaque colonne est défini explicitement. Les rôles de colonne acceptables pour chaque type de graphique Google sont disponibles dans la documentation correspondante, par exemple Format de données du graphique en colonnes.

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

Les propriétés de colonne sont spécifiées comme suit:

Paramètre	Type	Définition
type	chaîne, recommandé	Type de données de la colonne: 'string', 'number', 'boolean', 'date', 'datetime' ou 'timeofday'.
label	chaîne, recommandé	Libellé de la colonne, libellé de la série dans la légende du graphique.
role	chaîne, recommandé	Un rôle pour la colonne (par exemple, les rôles pour le graphique à colonnes).
pattern	chaîne, facultatif	Chaîne de format numérique (ou de date) spécifiant comment afficher la valeur de la colonne.

Objet JavaScript

Un DataTable peut être mis en forme en tant qu'objet littéral JavaScript dans lequel des tableaux d'objets de ligne et de colonne sont fournis. Pour savoir comment spécifier des paramètres de colonne et de ligne, consultez ce guide.

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

Graphique DataTable manuel

Supposons que vous souhaitiez afficher une petite quantité de données statiques dans un graphique. Utilisez les spécifications de tableau ou d'objet JavaScript pour créer une entrée à transmettre à la fonction ui.Chart. Ici, les populations d'États sélectionnées du recensement américain de 2010 sont encodées en tant que tableau JavaScript avec des objets d'en-tête de colonne qui définissent les propriétés de colonne. Notez que la troisième colonne est désignée comme rôle 'annotation', ce qui ajoute la population en tant qu'annotation à chaque observation du graphique.

Éditeur de code (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);

Graphique DataTable calculé

Un tableau DataTable peut être créé à partir d'un ee.List 2D transmis du serveur au client via evaluate. Un scénario courant consiste à convertir les propriétés d'un ee.FeatureCollection, d'un ee.ImageCollection ou d'une réduction par élément de ces éléments en DataTable. La stratégie appliquée dans les exemples suivants mappe une fonction sur un ee.ImageCollection qui réduit l'élément donné, assemble un ee.List à partir des résultats de réduction et associe la liste en tant que propriété appelée 'row' à l'élément renvoyé. Chaque élément de la nouvelle collection possède un ee.List 1D qui représente une ligne dans un DataTable. La fonction aggregate_array() permet d'agréger toutes les propriétés 'row' dans un ee.List parent afin de créer un ee.List côté serveur en 2D dans la forme requise pour DataTable. Un en-tête de colonne personnalisé est concaténé à la table, et le résultat est transféré côté client avec evaluate, où il est affiché à l'aide de la fonction ui.Chart.

Remarque :Les graphiques imprimés à partir d 'une fonction evaluate n'affichent pas immédiatement le message Génération du graphique… dans la console ou le widget ui.Panel. Attendez patiemment que la requête ait été exécutée et que les résultats aient été transférés au client.

Séries temporelles par région

Cet exemple présente une série temporelle des indices de végétation NDVI et EVI dérivés de MODIS pour une écorégion boisée. Chaque image de la série est réduite par l'écorégion et ses résultats sont rassemblés en tant que propriété 'row', qui est agrégée dans un DataTable pour être transmise au client et représentée sous forme de graphique avec ui.Chart. Notez que cet extrait génère le même graphique que celui généré par l'exemple de graphique ui.Chart.image.series.

Éditeur de code (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);
});

Graphique des intervalles

Ce graphique exploite la propriété 'role' de la colonne DataTable pour générer un graphique par intervalle. Le graphique met en relation le profil NDVI annuel et la variance interannuelle d'un pixel près de Monterey (Californie). La médiane interannuelle est présentée sous forme de ligne, tandis que les intervalles absolus et interquartiles sont affichés sous forme de bandes. Les colonnes de table représentant chaque intervalle sont attribuées en tant que telles en définissant la propriété de colonne 'role' sur 'interval'. Les bandes sont dessinées autour de la ligne médiane en définissant la propriété de graphique intervals.style sur 'area'.

Éditeur de code (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);
});

Il existe de nombreuses façons de représenter des intervalles. Dans l'exemple suivant, des rectangles sont utilisés à la place de bandes en remplaçant la propriété intervals.style par 'boxes' avec le style de rectangle correspondant.

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