search

OGGM / hacktoberfest-2019

Discussion repository for the OGGM hacktoberfest 2019
MIT License
1 stars 0 forks source link

Project idea: redo the ACINN weather plots with Bokeh #1

Open fmaussion opened 4 years ago

fmaussion commented 4 years ago

Short description

We used to have online interactive displays of live meteorological data on the ACINN website. Now that we are on the uni layout, these plots are gone!

They were created with a tool called "highcharts", which is great but not very easy to learn for us scientists. Nowadays we have Holoviz and Bokeh to create awesome visualizations using python alone.

The idea is to write a script which uses the data live feed to create html charts that can then be linked from any website!

What will we need?

Holoviz and Bokeh to create the html plots.

See https://fabienmaussion.info/scientific_programming/html/22-Assignment-08.html to get you started with the live data (the url has changed but it still works - I can give you the new url)

Who can help?

@pat-schmitt and @zschirmeister are our ACINN resident experts on Bokeh and Holoviz.

Team

matthiasdusch commented 4 years ago

I think I'd like to be part of this. finally a good reason for getting started with Bokeh and Holoviz...!

retostauffer commented 4 years ago

Great to revamp the current whatever it is! +1 from my side.

Some thoughts about this: the interactive plot has its advantages. Advantage of a Python plot: easier to maintain and upgrade in the future (e.g., by motivated students). On the other hand one could write something interactive (e.g., with d3; if supported). Advantage: d3 would only have to fetch some JSON arrays from one of the meteo-data machines and no extra crons have to be maintained to create/copy the static images.

Overall a cool idea to work on that.

Exi666 commented 4 years ago

If possible, I'd like to work on this too

fmaussion commented 4 years ago

the interactive plot has its advantages.

@retostauffer note that bokeh does create interactive plots. Here are some examples:

https://fabienmaussion.info/2018/11/25/bokeh-stripes/

https://agroclim-huaraz.info/live

So the task would be to use HoloViz to create html files that can then be embedded in other pages, like ertel2 or maybe even in XIMS (don't know if it's possible...)

fmaussion commented 4 years ago

Oh I forgot @matcast full blog post of interactivity ;-)

https://oggm.org/2019/03/21/GlaThiDa-statistics/

retostauffer commented 4 years ago

Thanks @fmaussion, was not aware of it and had no time to check it out :). Sry.

MatCast commented 4 years ago

This is a great idea. I was wondering why the weather charts had been removed from the acinn website. If i will be able to participate i would also like to work on this. I also agree with @retostauffer on the d3 matter. In the past months i worked with bokeh, Holoviews and d3.js. d3.js gives you much more freedom and it is much easier to set up compared to a bokeh server: you don't need any python environment, you just need a server serving the data. The only drawback i see with d3 is its steep learning curve. Once you know how to work with it however it gives you all the control you need on the chart, the interactions, and the possible animations.

fmaussion commented 4 years ago

you don't need any python environment

Here again, with bokeh you can make "static" html plots which would do exactly what the previous js scripts where doing. i.e. no server is needed to display your blog post for example.

fmaussion commented 4 years ago

It's not that I'm not open to other solutions btw, I just think that learning HoloViz (or equivalent: Plotly, Voilà, and I don't know what the R equivalent is) is more useful for us on the long term. ;-)

retostauffer commented 4 years ago

The R equivalent is: plotly (one of them). One just needs to be able to embed it in XIMS but I think that's possible, right? And then change the "static data" to some Ajax request or whatever. I agree with both of you. d3: more freedom but much more effort. Py: as the ACINN students and members are used to Python I think this is better on the long term (maintenance, improvements, ...) and it should be less effort - if one is able to do it with e.g., Plotly.

I personally had serious problems creating multiple time series with subplots with the very same x-axis (size, position, limits) and add interaction on ALL of them - synchronized :). But I am sure it is possible if one spends more than 2h on that g.

MatCast commented 4 years ago

you don't need any python environment

Here again, with bokeh you can make "static" html plots which would do exactly what the previous js scripts where doing. i.e. no server is needed to display your blog post for example.

Let me see if i understand it correctly: on the server side you would like to generate the html plots with bokeh everytime new data is available. Then you would just embed the plots with an iframe in the acinn page right? I think the plots wouldn't look so cool and you might have alot of issues with responsiveness. For instance my blog post on mobile is completly off: you don't see half of the chart width.

But honestly d3 is much more effort also thinking about possible maintenence issues. And surely learning bokeh and holoviews is more useful in the day to day work.

fmaussion commented 4 years ago

I see this project obviously has some momentum -> let's discuss this on tuesday's pre-meeting and agree on the way to go!

MatCast commented 4 years ago

I won't be able to make it so i will just add one thing i would really like to see implemented on this page.

It would be very nice to have a top section above the plots with the current weather values at Innsbruck university: i often find myself browsing this page to check the current temperature, and having to hover the plots for the last available data point is really frustrating, especially when you are doing so from a mobile device.

MatCast commented 4 years ago

Btw i just run into this which seems like a cool tool to create interactive plots and webpages.

https://streamlit.io/

fmaussion commented 4 years ago

A good start if you want to use Bokeh is to run the tutorial on OGGM-edu: http://edu.oggm.org/en/latest/oggm_tuto.html (written by @pat-schmitt in June, might need some updating)

Exi666 commented 4 years ago

Link to the repo: https://github.com/SiMaria/ACINNweatherplots

MatCast commented 4 years ago

I don't know how fare you got with this but i could not find the charts on the ACINN website so i thought to give it a try.

I created the charts with chart.js which is an open source JS library to create plots in an easy way (much like bokeh). Right now i didn't create the functions and buttons to update the charts with 3 days or single days data. Also only the charts for Innsbruck are present. Creating the other charts should be quite easy and if you are interested in this i could add those features.

Repo

Live Example

innsbruck_temp