Charts as easy as what, where, print

By Justin Braaten, Technical Writer, Earth Engine

Google Earth Engine is an effective platform for data visualization of all kinds. We often focus on its ability to generate time lapse animations for Earth monitoring, or making map layers that call out significant environmental change at local to global scales. But did you know that you can also create insightful charts with just a few lines of code?

In recognition of the importance of charts for distilling data and conveying information, we have updated the Earth Engine Developer Guide section on charting to demonstrate the full range of capabilities. There are seven new pages with forty complete examples — check it out!

Check out the updated Earth Engine Developer Guide on charting.

EZ charts

Charting capability is integrated into the JavaScript Code Editor API. The neat thing about this is that charting functions are designed for Earth Engine objects, which means there is no data wrangling required to perform a reduction or get data into a properly formatted table — the API functions handle all of it.

For instance, suppose you want to plot 20 years of MODIS NDVI observations for a deciduous forest in Arkansas, USA… it’s as easy as what, where, print:

var what = ee.ImageCollection('MODIS/006/MOD13A2').select('NDVI');
var where = ee.Geometry.Point([-93.51, 35.76]);
print(ui.Chart.image.series(what, where));

Three lines of code to generate a 20-year MODIS NDVI profile chart.

Or maybe you’d like to see the same data organized by observation year to evaluate year-over-year differences… collection, band, where, print:

var collection = ee.ImageCollection('MODIS/006/MOD13A2');
var band = 'NDVI';
var where = ee.Geometry.Point([-93.51, 35.76]);
print(ui.Chart.image.doySeriesByYear(collection, band, where));

Four lines of code to generate a 20-year annual MODIS NDVI chart.

You can also easily compare the spectral history of different regions to see how the environment affects plant productivity or evaluate the difference in forest productivity following various management treatments. Here, for example, we compare NDVI for the deciduous forest in Arkansas to a coniferous redwood forest in California:

var what = ee.ImageCollection('MODIS/006/MOD13A2').select('NDVI');
var where = ee.FeatureCollection([
  ee.Feature(ee.Geometry.Point([-93.51, 35.76]), {'veg_type': 'Deciduous'}),
  ee.Feature(ee.Geometry.Point([-122.06, 37.01]), {'veg_type': 'Coniferous'})
]);
var how = ee.Reducer.mean();
var by = 'veg_type';
print(ui.Chart.image.seriesByRegion(what, where, how, null, null, null, by));

Charting functions built for specific Earth Engine data types removes much of the need for data wrangling.

The examples above just scratch the surface of the types of charts that can be generated with the Earth Engine Code Editor ui.Chart API. To learn more visit the new Charts Overview page.

Elements of style

The Earth Engine JavaScript ui.Chart API relies on Google Charts for rendering tabular data and applies its default styling. Google Charts are quite customizable though, allowing you to define nearly all elements of the chart’s style. To fast-track personalization of your charts, we’ve included an entire page showing you how to set options for some of the most common style elements. For example, we can take one of the previous charts and set style properties to make it resemble a classic ggplot2 chart:

var what = ee.ImageCollection('MODIS/006/MOD13A2').select('NDVI');
var where = ee.Geometry.Point([-93.51, 35.76]);
var chartStyle = {
  title: 'ggplot2 Default Chart Style',
  colors: ['F8766D'],
  hAxis: {
    title: 'Observation Date',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFF'},
    baselineColor: 'FFF'
  },
  vAxis: {
    title: 'NDVI (1e4)',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFF'},
    baselineColor: 'FFF'
  },
  chartArea: {backgroundColor: 'EBEBEB'}
};
print(ui.Chart.image.series(what, where).setOptions(chartStyle));

Custom chart styling properties applied to make a chart resemble a classic ggplot2 chart.

Interactivity

It might not surprise you to learn that chart data have callouts, but did you know that Earth Engine chart axes can be set to allow zooming and panning? When a lot of data are plotted, this functionality can make interpretation easier; for example zooming in on a cluster of points to figure out the observation date with the greatest value or panning to a date range that is outside the view window of a long time series.

Earth Engine chart axes can be set to allow zooming and panning.

Charts for all

Charts can be added to Earth Engine Apps to allow anyone to interactively explore your analysis. In the examples above we have been printing charts to the Code Editor console, but you can also add chart objects to a ui.Panel to display the chart in an App. To get you started, here is a tutorial on how you can implement interactive charting in an Earth Engine App.

For a bit of fun and enhanced Earth-change interpretation, I’ve combined two of my favorite things into a charting app: color palettes and Landsat time series data. Select a terrestrial point anywhere on Earth and you’ll get an Landsat time series chart where each point represents the RGB color of the pixel based on three selected bands for an annual median composite. Click away and admire the temporal tapestry of Earth!

Landsat RGB time series Earth Engine App — give it a try.

Until next time…

We hope the updated Earth Engine Developer Guide pages on charting will inspire you to explore and visualize your data in new ways. We’re excited to see what you discover — happy coding!