graphs menu option

[michaelchin]

This menu option is about providing already published time dependent graphs of different variables, similar to the graphs show on the charts tab at the following website: https://media.hhmi.org/biointeractive/earthviewer_web/earthviewer.html ​

NW: Graph will be amazing, but will the graph overlay the globe? Or occupy a small section at the bottom of the screen? ​

[michaelchin]

hhmi uses highcharts. i guess it is free for school project. need to confirm with them.
https://www.highcharts.com/blog/download/?_ga=2.44889508.1830102636.1653868359-390261247.1653868359

Alternatively, use d3js https://observablehq.com/@d3/index-chart

[michaelchin]

@yiyanw has experience in Apache echarts https://echarts.apache.org/examples/en/index.html
The Apache echarts looks decent. Let's try to use it.

[michaelchin]

https://gws.gplates.org/mobile/get_scotese_etal_2021_global_temp
for test purpose

[yiyanw]

@michaelchin @nickywright @mariaseton @matthewmerkas
I create a basic statistics data graph and link it to the age slider.
https://user-images.githubusercontent.com/31875861/186370376-27bac1f4-d4f9-4bd8-a18a-2c1ce4993655.mp4

also, I bond this graph to the button in tool menu

Do we need extra vertical time slider on left like example wee used?

If you have any idea, please comment here.

[nickywright]

@yiyanw, this looks great! Might have to adjust some fonts etc for the graph, but definitely looks like it's coming along!

for the age slider - I like it, but not sure how if it will fit in here....
Can you slide along the graph to change the time?

[yiyanw]

@nickywright

Might have to adjust some fonts etc for the graph

Do you have some idea about font and style?

Can you slide along the graph to change the time?

Ok, I will try to use the graph to change the time.

for the age slider - I like it, but not sure how if it will fit in here....

This age slider is our original one, it can collapse.

Also, do you want to keep the consistency between graph and age slider?

[yiyanw]

@michaelchin
Also, I found that the test data range is 0-540, and our age slider range is 0-410. Is that normal or just for test data?

[michaelchin]

@michaelchin Also, I found that the test data range is 0-540, and our age slider range is 0-410. Is that normal or just for test data?

It is just for test purpose only. We will figure out how to keep the age range consistent down the road.

[yiyanw]

@michaelchin
Ok, that's great, I will assume the range is the same for now.

[yiyanw]

I refined the graph component and now users can directly change time by clicking and sliding the graph. Also, the time is consistent between the age slider and the graph.

demo.2.mp4

Also, because of the difference between touch devices and PC, the graph looks slightly different on different platforms.
this is for touch devices

this is for PC (has an extra sliding button)

[michaelchin]

https://echarts.apache.org/examples/en/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1

use an invalid image url to get rid of the button, if not wanted.

[michaelchin]

@yiyanw Welcome back. Could you please work on this? We need to pop up a list and allow user to choose which graph to open. Use placeholders and dummy data for dev purpose for now.

And also please cut the graph according to the model's start time and end time. For example, if the model is 0-230, truncate the input data to fit within the range 0-230.

[yiyanw]

@michaelchin pop-up list added
this list is collapsed by default, you can click "Graph List" to open it. In the list, the currently selected graph will be represented in blue color and bolder size. Users can directly click the wanted graph to switch.
Also, the range of graphs is limited by the raster map's valid interval.
here is the demo:

[michaelchin]

consider as done. open new Issues for any further changes.