Gráficos de imágenes

El módulo ui.Chart.image contiene un conjunto de funciones para reducir objetos Image por regiones y renderizar gráficos a partir de los resultados. La elección de la función determina la disposición de los datos en el gráfico, es decir, lo que define los valores de los ejes X e Y y lo que define la serie. Usa las siguientes descripciones y ejemplos de funciones para determinar la mejor función y el mejor tipo de gráfico para tu propósito.

Funciones de gráfico

Usa los siguientes diagramas de trama como guía visual para comprender cómo cada función organiza los resultados de la reducción de regiones de imagen en un gráfico; es decir, qué elementos definen los valores x, y y las series.

ui.Chart.image.byRegion

Las regiones de reducción se trazan a lo largo del eje x, etiquetadas por valores de una propiedad de componente seleccionada. Las series se definen por nombres de bandas cuyos resultados de reducción de regiones se trazan a lo largo del eje y.

ui.Chart.image.regions

Las bandas se trazan a lo largo del eje X. Las series se etiquetan según los valores de una propiedad de componente. La reducción de la región definida por la geometría de los componentes de las series correspondientes se traza a lo largo del eje Y.

ui.Chart.image.byClass

Las bandas de datos se trazan a lo largo del eje x. Las series se representan con valores únicos en una banda de clase. La posición del eje Y se define según los resultados de la reducción de regiones para los píxeles que componen cada serie.

ui.Chart.image.histogram

Histograma de frecuencia para los valores de las bandas seleccionadas.

  • Eje X: Buckets de histograma para los valores de las bandas seleccionadas
  • Eje Y: Frecuencia de píxeles calificados para cada bucket del histograma

Datos de ejemplo

En los siguientes ejemplos, se usa un FeatureCollection compuesto por tres componentes de ecorregión que definen regiones para reducir los datos de imagen. Los datos de Image son las normales climáticas de PRISM, en las que las bandas describen las variables climáticas por mes; p.ej., Precipitaciones de julio o temperatura promedio de enero. Obtén información sobre cómo se creó este recurso.

ui.Chart.image.byRegion

Gráfico de columnas

En este ejemplo, las bandas de imágenes que representan la temperatura mensual promedio se reducen al promedio entre los píxeles que se cruzan en cada una de las tres ecorregiones. Los resultados se grafican como columnas por mes por ecorregión, donde la altura de la columna indica la temperatura mensual promedio correspondiente.

Editor de código (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_tmean'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average Monthly Temperature by Ecoregion',
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxis: {
            title: 'Temperature (°C)',
            titleTextStyle: {italic: false, bold: true}
          },
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ]
        });
print(chart);

Gráfico de barras

Para renderizar el gráfico de columnas anterior como un gráfico de barras, cambia la entrada .setChartType() de 'ColumnChart' a 'BarChart'.

var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_tmean'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('BarChart')
        .setOptions({
          title: 'Average Monthly Temperature by Ecoregion',
          hAxis: {
            title: 'Temperature (°C)',
            titleTextStyle: {italic: false, bold: true}
          },
          vAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ]
        });

Gráfico de columnas apiladas

La opción de gráfico isStacked especifica si las columnas del gráfico se apilan o no. Se proporcionan varias opciones para el apilamiento. En los siguientes ejemplos, se muestra el uso de las opciones 'absolute' y 'relative'.

Absoluto

Un gráfico de barras apiladas absoluto relaciona el total de una variable numérica con incrementos de una serie de variables categóricas contribuyentes. Por ejemplo, en este ejemplo, la precipitación total se grafica como la acumulación de la precipitación mensual durante un año, por ecorregión. Los totales mensuales de precipitación se derivan de las bandas de imágenes, en las que cada banda representa una cuadrícula del total promedio de precipitación de un mes determinado, reducido al promedio de los píxeles que se cruzan en cada una de las tres ecorregiones. La opción de gráfico isStacked se establece en 'absolute' para dar formato a los resultados como valores absolutos.

Editor de código (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_ppt'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average Monthly Precipitation by Ecoregion',
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxis: {
            title: 'Precipitation (mm)',
            titleTextStyle: {italic: false, bold: true}
          },
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ],
          isStacked: 'absolute'
        });
print(chart);

Relativo

Para convertir el gráfico de barras apiladas absoluto anterior en un gráfico de barras apiladas relativo, cambia la opción de gráfico isStacked de 'absolute' a 'relative'. Un gráfico de barras apiladas relativo relaciona la proporción de series de variables categóricas que contribuyen con el total de una variable numérica. Por ejemplo, en este ejemplo, las precipitaciones mensuales se grafican como una proporción de la precipitación anual total, por ecorregión.

var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_ppt'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average Monthly Precipitation by Ecoregion',
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxis: {
            title: 'Precipitation (mm)',
            titleTextStyle: {italic: false, bold: true}
          },
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ],
          isStacked: 'relative'
        });

Diagrama de dispersión (Scatter chart)

Las temperaturas promedio de enero y julio de una muestra aleatoria de ubicaciones en el estado de Colorado se grafican como una función de la elevación. Se toma una muestra de un DEM con la función sample, que muestra un FeatureCollection con una geometría y una propiedad de elevación. Luego, el FeatureCollection resultante se usa como argumento para el parámetro regions de la función ui.Chart.image.byRegion. Las series se definen según las bandas seleccionadas de la imagen de las normales climáticas de entrada.

Editor de código (JavaScript)

// Load SRTM elevation data.
var elev = ee.Image('CGIAR/SRTM90_V4').select('elevation');

// Subset Colorado from the TIGER States feature collection.
var colorado = ee.FeatureCollection('TIGER/2018/States')
                   .filter(ee.Filter.eq('NAME', 'Colorado'));

// Draw a random sample of elevation points from within Colorado.
var samp = elev.sample(
    {region: colorado, scale: 30, numPixels: 500, geometries: true});

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .byRegion({
                  image: normClim.select(['01_tmean', '07_tmean']),
                  regions: samp,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  xProperty: 'elevation'
                })
                .setSeriesNames(['Jan', 'Jul'])
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Average Monthly Colorado Temperature by Elevation',
                  hAxis: {
                    title: 'Elevation (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Temperature (°C)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  pointSize: 4,
                  dataOpacity: 0.6,
                  colors: ['1d6b99', 'cf513e'],
                });
print(chart);

Gráfico combinado

Para tres ecorregiones en un ee.FeatureCollection, se grafican las precipitaciones y la temperatura promedio de junio. Los resultados se derivan de la reducción de la región de una imagen en la que cada banda es una cuadrícula de valores normales del clima que describen la precipitación y la temperatura mensuales. Las bandas que representan la temperatura y las precipitaciones de junio son un subconjunto. Dado que las precipitaciones y la temperatura están en unidades diferentes, se usan dos ejes Y configurando las opciones series y vAxes. Observa el uso de la opción series.targetAxisIndex para definir qué variable se traza en el eje Y derecho e izquierdo. Se usan símbolos específicos de la serie (puntos y columnas) para distinguir con mayor facilidad las dos variables como unidades diferentes.

Editor de código (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select(['06_tmean', '06_ppt']),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames(['Precipitation', 'Temperature'])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average June Temperature and Precipitation by Ecoregion',
          series: {
            0: {targetAxisIndex: 1, type: 'bar', color: '1d6b99'},
            1: {
              targetAxisIndex: 0,
              type: 'line',
              lineWidth: 0,
              pointSize: 10,
              color: 'e37d05'
            }
          },
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxes: {
            0: {
              title: 'Temperature (°C)',
              baseline: 0,
              titleTextStyle: {italic: false, bold: true, color: 'e37d05'}
            },
            1: {
              title: 'Precipitation (mm)',
              titleTextStyle: {italic: false, bold: true, color: '1d6b99'}
            },
          },
          bar: {groupWidth: '40%'},
        });
print(chart);

ui.Chart.image.regions

Configuración de ejemplo

La función ui.Chart.image.regions acepta una lista que te permite controlar la etiqueta y el orden de los nombres de las bandas a lo largo del eje x asignándoles valores numéricos. En los siguientes gráficos, se usa esta opción para establecer los nombres de las bandas como etiquetas de mes y ordenarlas de forma cronológica para las precipitaciones mensuales promedio.

Gráfico de columnas

Este gráfico muestra la precipitación promedio total por mes en tres ecorregiones. Los resultados se derivan de la reducción de la región de una imagen en la que cada banda es una cuadrícula de precipitación total promedio de un mes determinado. Las bandas se trazan a lo largo del eje x y las regiones definen la serie. Ten en cuenta las operaciones del cliente que se usan para definir las entradas de las opciones de gráficos xLabels y ticks para la disposición personalizada del eje x. Las operaciones del cliente son obligatorias porque las opciones que se proporcionan a la función setOptions deben ser objetos del cliente (consulta Cliente frente a servidor para comprender la distinción). Para convertir a un gráfico de barras, usa 'BarChart' como entrada de .setChartType().

Editor de código (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection, convert images to bands, and
// subset precipitation bands.
var precip = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m')
                 .toBands()
                 .select('[0-9][0-9]_ppt');

// Define a dictionary that associates band names with values and labels.
var precipInfo = {
  '01_ppt': {v: 1, f: 'Jan'},
  '02_ppt': {v: 2, f: 'Feb'},
  '03_ppt': {v: 3, f: 'Mar'},
  '04_ppt': {v: 4, f: 'Apr'},
  '05_ppt': {v: 5, f: 'May'},
  '06_ppt': {v: 6, f: 'Jun'},
  '07_ppt': {v: 7, f: 'Jul'},
  '08_ppt': {v: 8, f: 'Aug'},
  '09_ppt': {v: 9, f: 'Sep'},
  '10_ppt': {v: 10, f: 'Oct'},
  '11_ppt': {v: 11, f: 'Nov'},
  '12_ppt': {v: 12, f: 'Dec'}
};

// Organize precipitation information into objects for defining x values and
// their tick labels. Note that chart options provided to the .setOptions()
// function must be client-side objects, which is why a client-side for
// loop is used to iteratively populate lists from the above dictionary.
var xPropVals = [];    // List to codify x-axis band names as values.
var xPropLabels = [];  // Holds dictionaries that label codified x-axis values.
for (var key in precipInfo) {
  xPropVals.push(precipInfo[key].v);
  xPropLabels.push(precipInfo[key]);
}

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('ColumnChart')
                .setOptions({
                  title: 'Average Ecoregion Precipitation by Month',
                  hAxis: {
                    title: 'Month',
                    titleTextStyle: {italic: false, bold: true},
                    ticks: xPropLabels
                  },
                  vAxis: {
                    title: 'Precipitation (mm)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                });
print(chart);

Gráfico de líneas

Para renderizar el gráfico de columnas anterior como un gráfico de líneas, cambia la entrada .setChartType() de 'ColumnChart' a 'LineChart'.

var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('LineChart')
                .setOptions({
                  title: 'Average Ecoregion Precipitation by Month',
                  hAxis: {
                    title: 'Month',
                    titleTextStyle: {italic: false, bold: true},
                    ticks: xPropLabels
                  },
                  vAxis: {
                    title: 'Precipitation (mm)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  lineSize: 5
                });

Gráfico de áreas

Para renderizar el gráfico de columnas anterior como un gráfico de áreas, cambia la entrada .setChartType() de 'ColumnChart' a 'AreaChart'.

var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('AreaChart')
                .setOptions({
                  title: 'Average Ecoregion Precipitation by Month',
                  hAxis: {
                    title: 'Month',
                    titleTextStyle: {italic: false, bold: true},
                    ticks: xPropLabels
                  },
                  vAxis: {
                    title: 'Precipitation (mm)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  lineSize: 5
                });

Gráfico circular

Las precipitaciones mensuales promedio se muestran como una proporción de la precipitación anual total promedio de una ecorregión forestal. Las bandas de imágenes que representan las precipitaciones mensuales son un subconjunto de un conjunto de datos de las normales climáticas y se reducen a la media de los píxeles que se cruzan con la ecorregión.

Editor de código (JavaScript)

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

// Load PRISM climate normals image collection, convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define x-axis labels to replace default band names.
var monthNames = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
  'Dec'
];

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .regions({
                  image: normClim.select('[0-9][0-9]_ppt'),
                  regions: forest,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: monthNames
                })
                .setChartType('PieChart')
                .setOptions({
                  title: 'Average Monthly Precipitation for Forest Ecoregion',
                  colors: [
                    '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
                    'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
                  ]
                });
print(chart);

Gráfico de anillo

Para convertir el ejemplo de gráfico circular en un gráfico de dona, configura la opción de gráfico pieHole. Prueba 0.4 y 0.6 como valores iniciales.

var chart = ui.Chart.image
                .regions({
                  image: normClim.select('[0-9][0-9]_ppt'),
                  regions: forest,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: monthNames
                })
                .setChartType('PieChart')
                .setOptions({
                  title: 'Average Monthly Precipitation for Forest Ecoregion',
                  colors: [
                    '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
                    'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
                  ],
                  pieHole: 0.4
                });

ui.Chart.image.byClass

Gráfico de líneas

La función ui.Chart.image.byClass traza estadísticas de valores de banda para los píxeles dentro de regiones clasificadas de una "banda de clase". En este ejemplo, se usa para mostrar el perfil espectral de tres ecorregiones. Los componentes de la ecorregión se rasterizan y se agregan como una banda a una imagen de reflectancia superficial (SR) de MODIS. Para cada clase de ecorregión y banda de reflectancia, se calcula la media de píxeles correspondiente y se traza en el eje Y. Las longitudes de onda centrales de las bandas de SR de MODIS definen las marcas y etiquetas del eje x. Ten en cuenta que la opción de gráfico de líneas curveType se establece como 'function' para suavizar las líneas.

Editor de código (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Convert ecoregion feature collection to a classified image.
var regionsBand =
    ecoregions
        .reduceToImage({properties: ['value'], reducer: ee.Reducer.first()})
        .rename('class');

// 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();

// Reorder reflectance bands by ascending wavelength and
// add the classified ecoregions image as a band to the SR collection and
var modisSrClass = modisSr.select([2, 3, 0, 1, 4, 5, 6]).addBands(regionsBand);

// Define a list of MODIS SR wavelengths for x-axis labels.
var wavelengths = [469, 555, 655, 858, 1240, 1640, 2130];

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .byClass({
                  image: modisSrClass,
                  classBand: 'class',
                  region: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  classLabels: ['Desert', 'Forest', 'Grassland'],
                  xLabels: wavelengths
                })
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Ecoregion Spectral Signatures',
                  hAxis: {
                    title: 'Wavelength (nm)',
                    titleTextStyle: {italic: false, bold: true},
                    viewWindow: {min: wavelengths[0], max: wavelengths[6]}
                  },
                  vAxis: {
                    title: 'Reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  pointSize: 0,
                  lineSize: 5,
                  curveType: 'function'
                });
print(chart);

ui.Chart.image.histogram

Se muestra un histograma de valores de píxeles dentro de una región que rodea Salt Lake City, Utah, EE.UU., para tres bandas de reflectancia superficial de MODIS.

Editor de código (JavaScript)

// 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_b01', 'sur_refl_b02', 'sur_refl_b06'])
                  .mean();

// Define a region to calculate histogram for.
var histRegion = ee.Geometry.Rectangle([-112.60, 40.60, -111.18, 41.22]);

// Define the chart and print it to the console.
var chart =
    ui.Chart.image.histogram({image: modisSr, region: histRegion, scale: 500})
        .setSeriesNames(['Red', 'NIR', 'SWIR'])
        .setOptions({
          title: 'MODIS SR Reflectance Histogram',
          hAxis: {
            title: 'Reflectance (x1e4)',
            titleTextStyle: {italic: false, bold: true},
          },
          vAxis:
              {title: 'Count', titleTextStyle: {italic: false, bold: true}},
          colors: ['cf513e', '1d6b99', 'f0af07']
        });
print(chart);