[Charts] Add a chart module for creating interactive charts

[giswqs]

Currently, the ui.Chart functions are only available through the GEE JavaScript API. It would be nice to have the Pythonic version of these functions. They can potentially be implemented using bqplot and matplotlib.

[giswqs]

A prototype. See the notebook example https://geemap.org/notebooks/63_charts

63_charts.mp4

[ErikSeras]

This would be an example of a static graph with GEE data.

import ee, datetime
import pandas as pd
from pylab import *
import seaborn as sns
from matplotlib.pylab import rcParams
from statsmodels.tsa.seasonal import seasonal_decompose

# Set start and end date
startTime = datetime.datetime(2015, 1, 1)
endTime = datetime.datetime(2019, 12, 31)

# Create image collection
collection = ee.ImageCollection('VITO/PROBAV/C1/S1_TOC_100M').filterDate(startTime, endTime)
# Create point in Luxembourg (Proba-V Footprint: X18Y02)
point = {'type':'Point', 'coordinates':[6.134136, 49.612485]};

info = collection.getRegion(point,500).getInfo()

# Reshape image collection 
header = info[0]
data = array(info[1:])

iTime = header.index('time')
time = [datetime.datetime.fromtimestamp(i/1000) for i in (data[0:,iTime].astype(int))]

# List of used image bands
band_list = ['RED',u'NIR']

iBands = [header.index(b) for b in band_list]
yData = data[0:,iBands].astype(np.float)

# Calculate NDVI
red = yData[:,0]
nir = yData[:,1]
ndvi = (nir - red) / (nir + red)

df = pd.DataFrame(data=ndvi, index=list(range(len(ndvi))), columns=['NDVI'])
df = df.interpolate()
df['Date'] = pd.Series(time, index=df.index)
df = df.set_index(df.Date)
df.index = pd.to_datetime(df.index)
df['NDVI']=df['NDVI'].fillna(0)

# Change size
sns.set(rc={'figure.figsize':(15, 6)})

df_monthly=df.resample('W').mean()
df_monthly['pct_change'] = df_monthly.pct_change(52)
df_monthly['pct_change']['2016':].plot()
plt.title('NDVI Weekly Percent Change')

[giswqs]

@ErikSeras Thanks for providing the example. However, this chart module will be implemented using bqplot. Take a look at the chart module https://github.com/giswqs/geemap/blob/master/geemap/chart.py. Contributions are welcome.

[giswqs]

Implemented feature_byFeature() and feature_byProperty(). See notebook example https://geemap.org/notebooks/63_charts.

63_charts_b.mp4

[ErikSeras]

This example maybe can support this issue.

https://github.com/google/earthengine-community/blob/master/tutorials/time-series-visualization-with-altair/index.ipynb

[jdbcode]

Before expanding on the charts module I think we should make a module for creating the tables (image and image collection reduction in particular but also probably preparation/arrangement feature collections). I'm imagining that we have a set of functions that produce the tables needed for each of the chart types that are in the JS Code Editor API in long and wide formats. This way, a person can do what they want with them and we can rely on the tables in the chart module where it focuses only on chart building and rendering, which means we can more easily change the default charting library (see #1488) or add additional charting libraries.

[giswqs]

Good idea.

[Gui-FernandesBR]

Before expanding on the charts module I think we should make a module for creating the tables (image and image collection reduction in particular but also probably preparation/arrangement feature collections). I'm imagining that we have a set of functions that produce the tables needed for each of the chart types that are in the JS Code Editor API in long and wide formats. This way, a person can do what they want with them and we can rely on the tables in the chart module where it focuses only on chart building and rendering, which means we can more easily change the default charting library (see #1488) or add additional charting libraries.

Any progress on the tables idea?
I may be interested in consuming image collection data organized in a more tabular fashion.
This could significantly help with plots generation.

[giswqs]

We haven't had time to work on this yet. Contributions are welcome.
https://github.com/gee-community/geemap/blob/master/geemap/chart.py

[Gui-FernandesBR]

Well, looks like the ee_to_df() function from the common module already converts images or images collection to a pandas dataframe, which imo already solves the table problem. Indeed, I noticed the BaseChartClass is already relying on the ee_to_df. Creating reductions of those dataframes can be done on the user side.

I will take a deeper look at the chart module anyway.

[jdbcode]

Note: I see that Altair v5.1 has support for ipywidgets: https://altair-viz.github.io/user_guide/jupyter_chart.html This might be worth trying. The JupyterChart class makes it possible to update charts after they have been displayed and access the state of Interactive charts.

[jdbcode]

See also #1824 to fetch table data or continue to use ee_to_df once it has ee.data fetching.

[giswqs]

I have started working on the chart module. It seems Colab only has altair v4.2.2 installed, which does not support ipywidgets yet. For now, I will use bqplot as the plotting backend. Hopefully, we can add altair and plotly as additional backend in the future.