Graphiques de tableaux et de listes

La fonction ui.Chart.array.values fournit une méthode permettant d'afficher des graphiques à partir d'objets ee.Array et ee.List.

Les exemples suivants reposent sur des données de tableau et de liste générées par la réduction des bandes d'image et des métadonnées d'image à l'aide du réducteur ee.Reducer.toList(). Notez que tout ensemble de listes et/ou de tableaux ayant la même longueur le long d'un axe donné peut être tracé par ui.Chart.array.values.

Graphique à nuage de points de la région ee.Array

La réduction de la région de l'image par ee.Reducer.toList() génère un dictionnaire de listes de valeurs de pixel, une pour chaque bande d'une image donnée. Ici, il est utilisé pour extraire des listes de valeurs de réflectance rouge, NIR et SWIR à partir d'une image MODIS pour les pixels qui croisent une écorégion boisée. Les valeurs de réflectance rouge sont représentées sur l'axe X, tandis que les valeurs de NIR et de SWIR sont représentées sur l'axe Y.

L'élément projects/google/charts_feature_example, utilisé dans cet exemple pour délimiter une écorégion boisée, a été développé à des fins de démonstration. Il s'agit d'un ensemble de trois polygones d'écorégion avec des propriétés décrivant les normales climatiques.

É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'));

// Define a MODIS surface reflectance composite.
var modisSr = ee.ImageCollection('MODIS/006/MOD09A1')
                  .filter(ee.Filter.date('2018-06-01', '2018-09-01'))
                  .select('sur_refl_b0[0-7]')
                  .mean();

// Reduce MODIS reflectance bands by forest region; get a dictionary with
// band names as keys, pixel values as lists.
var pixelVals = modisSr.reduceRegion(
    {reducer: ee.Reducer.toList(), geometry: forest.geometry(), scale: 2000});

// Convert NIR and SWIR value lists to an array to be plotted along the y-axis.
var yValues = pixelVals.toArray(['sur_refl_b02', 'sur_refl_b06']);

// Get the red band value list; to be plotted along the x-axis.
var xValues = ee.List(pixelVals.get('sur_refl_b01'));

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: yValues, axis: 1, xLabels: xValues})
                .setSeriesNames(['NIR', 'SWIR'])
                .setOptions({
                  title: 'Relationship Among Spectral Bands for Forest Pixels',
                  colors: ['1d6b99', 'cf513e'],
                  pointSize: 4,
                  dataOpacity: 0.4,
                  hAxis: {
                    'title': 'Red reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    'title': 'Reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  }
                });
print(chart);

Graphique à nuage de points de la région ee.List

Vous pouvez tracer deux objets de liste à l'aide de la fonction ui.Chart.array.values. En s'appuyant sur l'exemple précédent, les listes de valeurs des axes X et Y représentant la réflectance dans le rouge et le SWIR sont affichées sous forme de nuage de points.

Éditeur de code (JavaScript)

// Get Red and SWIR value lists; to be plotted along x and y axes, respectively.
// Note that the pixelVals object is defined in the previous code block.
var x = ee.List(pixelVals.get('sur_refl_b01'));
var y = ee.List(pixelVals.get('sur_refl_b06'));

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: y, axis: 0, xLabels: x}).setOptions({
  title: 'Relationship Among Spectral Bands for Forest Pixels',
  colors: ['cf513e'],
  hAxis: {
    title: 'Red reflectance (x1e4)',
    titleTextStyle: {italic: false, bold: true}
  },
  vAxis: {
    title: 'SWIR reflectance (x1e4)',
    titleTextStyle: {italic: false, bold: true}
  },
  pointSize: 4,
  dataOpacity: 0.4,
  legend: {position: 'none'},
});
print(chart);

ee.List Graphique de transect

La réduction de la région de l'image par ee.Reducer.toList() génère un dictionnaire de listes de valeurs de pixel, une pour chaque bande d'image. Si la région est une ligne, comme dans ce cas, un transect géographique peut être généré lorsque des bandes de latitude et de longitude sont incluses dans l'image de référence. Ici, les listes de valeurs de pixel de longitude et d'altitude le long de la ligne de transect sont extraites en tant que variables distinctes et tracées sur les axes X et Y, respectivement.

Éditeur de code (JavaScript)

// Define a line across the Olympic Peninsula, USA.
var transect = ee.Geometry.LineString([[-122.8, 47.8], [-124.5, 47.8]]);

// Define a pixel coordinate image.
var latLonImg = ee.Image.pixelLonLat();

// Import a digital surface model and add latitude and longitude bands.
var elevImg =
    ee.Image('NASA/NASADEM_HGT/001').select('elevation').addBands(latLonImg);

// Reduce elevation and coordinate bands by transect line; get a dictionary with
// band names as keys, pixel values as lists.
var elevTransect = elevImg.reduceRegion({
  reducer: ee.Reducer.toList(),
  geometry: transect,
  scale: 1000,
});

// Get longitude and elevation value lists from the reduction dictionary.
var lon = ee.List(elevTransect.get('longitude'));
var elev = ee.List(elevTransect.get('elevation'));

// Sort the longitude and elevation values by ascending longitude.
var lonSort = lon.sort(lon);
var elevSort = elev.sort(lon);

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: elevSort, axis: 0, xLabels: lonSort})
                .setOptions({
                  title: 'Elevation Profile Across Longitude',
                  hAxis: {
                    title: 'Longitude',
                    viewWindow: {min: -124.50, max: -122.8},
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Elevation (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['1d6b99'],
                  lineSize: 5,
                  pointSize: 0,
                  legend: {position: 'none'}
                });
print(chart);

Appliquez .setChartType('AreaChart') pour ajouter un ombrage sous la ligne:

print(chart.setChartType('AreaChart'));

Graphique à nuage de points des métadonnées ee.List

La réduction des propriétés de collection par ee.Reducer.toList() génère un dictionnaire de listes de valeurs de propriété, une pour chaque propriété sélectionnée. Ici, les listes de propriétés de la couverture nuageuse et de l'RMSE géométrique sont générées à partir d'un ensemble d'images Landsat 8 en tant que variables distinctes. La variable d'ensoleillement est représentée sur l'axe X et la RMSE géométrique sur l'axe Y.

Éditeur de code (JavaScript)

// Import a Landsat 8 collection and filter to a single path/row.
var col = ee.ImageCollection('LANDSAT/LC08/C02/T1_L2')
              .filter(ee.Filter.expression('WRS_PATH ==  45 && WRS_ROW == 30'));

// Reduce image properties to a series of lists; one for each selected property.
var propVals = col.reduceColumns({
                    reducer: ee.Reducer.toList().repeat(2),
                    selectors: ['CLOUD_COVER', 'GEOMETRIC_RMSE_MODEL']
                  })
                   .get('list');

// Get selected image property value lists; to be plotted along x and y axes.
var x = ee.List(ee.List(propVals).get(0));
var y = ee.List(ee.List(propVals).get(1));

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: y, axis: 0, xLabels: x})
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Landsat 8 Image Collection Metadata (045030)',
                  colors: ['96356f'],
                  hAxis: {
                    title: 'Cloud cover (%)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Geometric RMSE (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  pointSize: 5,
                  dataOpacity: 0.6,
                  legend: {position: 'none'},
                });
print(chart);

Graphique à nuage de points et graphique linéaire de la fonction mappée ee.List

Mappez une fonction sur une liste de valeurs x pour calculer une liste de valeurs y correspondante. Ici, la fonction sin() est mappée sur une liste de valeurs de l'axe X pour produire une liste correspondante de valeurs de l'axe Y. Un échantillon de l'onde sinusoïdale s'affiche lorsque les listes X et Y sont tracées.

Éditeur de code (JavaScript)

// Define a sequence from -2pi to +2pi in 50 increments.
var start = -2 * Math.PI;
var end = 2 * Math.PI;
var points = ee.List.sequence(start, end, null, 50);

// Evaluate the sin() function for each value in the points sequence.
var values = points.map(function(val) {
  return ee.Number(val).sin();
});

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: values, axis: 0, xLabels: points})
                .setOptions({
                  title: 'Sine Function',
                  hAxis: {
                    title: 'radians',
                    viewWindowMode: 'maximized',
                    ticks: [
                      {v: start, f: '-2π'},
                      {v: -Math.PI, f: '-π'},
                      {v: 0, f: '0'},
                      {v: Math.PI, f: 'π'},
                      {v: end, f: '2π'}
                    ],
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'sin(x)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['39a8a7'],
                  lineWidth: 3,
                  pointSize: 7,
                  viewWindow: {min: start, max: end},
                  legend: {position: 'none'}
                });
print(chart);