Need help on the fancy plot as shown on website of "https://swellspect.herokuapp.com/bouy/46026"

As introduced in the online tutorial @ “https://continuum-analytics.wistia.com/medias/f6wp9dam91”, the website of “https://swellspect.herokuapp.com/bouy/46026” does give really nice and fancy way to display the real time, history and forecast data together. From personal point of view, I really like it very much and would like to use in my project.

However, I have no idea how to reproduce the nice plots. (Actually I tried to use seaborn to plot the heatmap plot and use bokeh to plot the curved plot, however, cannot give one optimal results as shown on the website.)

I appreciate a lot if any people can give me any indication on how to reproduce the nice plots?

Thanks in advance.

Gongming Wei,
Why not contact the person who programmed those graphics? His email address is on a linked page at
https://swellspect.herokuapp.com/about_me

···

On Sun, Jan 17, 2016 at 9:37 PM, gongming wei [email protected] wrote:

As introduced in the online tutorial @ “https://continuum-analytics.wistia.com/medias/f6wp9dam91”, the website of “https://swellspect.herokuapp.com/bouy/46026” does give really nice and fancy way to display the real time, history and forecast data together. From personal point of view, I really like it very much and would like to use in my project.

However, I have no idea how to reproduce the nice plots. (Actually I tried to use seaborn to plot the heatmap plot and use bokeh to plot the curved plot, however, cannot give one optimal results as shown on the website.)

I appreciate a lot if any people can give me any indication on how to reproduce the nice plots?

Thanks in advance.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/7950ea22-c7f2-4ad2-96af-b4ab96b6ad05%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

David P. Saroff
Rochester Institute of Technology
54 Lomb Memorial Dr, Rochester, NY 14623
[email protected] | (434) 227-6242

I wrote emails to the author, but no feedback yet. Maybe he is enjoy his holiday recently somewhere. : )

By the way, there could be some type error of the the email address on the website. It should be " jeff dot knowles at gmail dot com" instead of " jeff dot knowles at gsnail dot com"

···

On Mon, Jan 18, 2016 at 10:54 AM, DAVID SAROFF (RIT Student) [email protected] wrote:

Gongming Wei,
Why not contact the person who programmed those graphics? His email address is on a linked page at
https://swellspect.herokuapp.com/about_me

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CABMftcR_hK-UA60kAcSRj8PNr9hU85BB%2BotVtR%3DxVGBkxhfQSA%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

On Sun, Jan 17, 2016 at 9:37 PM, gongming wei [email protected] wrote:

As introduced in the online tutorial @ “https://continuum-analytics.wistia.com/medias/f6wp9dam91”, the website of “https://swellspect.herokuapp.com/bouy/46026” does give really nice and fancy way to display the real time, history and forecast data together. From personal point of view, I really like it very much and would like to use in my project.

However, I have no idea how to reproduce the nice plots. (Actually I tried to use seaborn to plot the heatmap plot and use bokeh to plot the curved plot, however, cannot give one optimal results as shown on the website.)

I appreciate a lot if any people can give me any indication on how to reproduce the nice plots?

Thanks in advance.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/7950ea22-c7f2-4ad2-96af-b4ab96b6ad05%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

David P. Saroff
Rochester Institute of Technology
54 Lomb Memorial Dr, Rochester, NY 14623
[email protected] | (434) 227-6242

All, my email is human decodable from gsnail.

Here is my response to gongming about how to make nice looking heatmaps and linked plots:

Hey Gongming,

Sorry for the delay. I have been busy with work and also surfing (you can read about it at the swellspect.com website).

I’d be happy to share how to generate linked ‘heatmap’ spectrograms with the 2d plot axis. Basically, it uses custom js to link together the axes source data. This is well documented by bokeh. As for the ‘heatmap’, Also, I am using the figure.‘image’ function from bokeh and making sure to set the color axis correctly. To get a good color axis I actually pull from matplotlib. To get a good colormap in javascript. See my reply and sarahbirds response on this page:
visualization - Can I plot a colorbar for a bokeh heatmap? - Stack Overflow

update_ts = CustomJS(args=dict(sourcedata=sourcedata),

   code="""

    function degToCompass(num) {

var val = Math.floor((num / 22.5) + 0.5);

var arr = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];

return arr[(val % 16)].concat(" (", Math.round(num).toString(), ")");

	}

	function degToCompassArr(arr){

		var arro = [];

		for (var i = 0; i<arr.length; i++){

			arro[i]=degToCompass(arr[i]);

		}

		return arro;

	}

     var y            = cb_data.geometry.y;

     var x 			  = cb_data.geometry.x;

     var data = sourcedata.get('data');

     var paxis            = data['paxis'];

     var model_paxis 	  = data['model_paxis']

     var y2disp_ts        = data['y'];

     var amp              = data['amp'];

     var n_rows_data 	  = amp.length;

     var model_amp        = data['model_amp'];

     var timey            = data['b'];

     var dir = data['dir'];

     var model_dir = data['model_dir'];

     if (y<0){

     	var c 			  = Math.round(-y*24);

     	for (i = 0; i < paxis.length; i++) {

        	y2disp_ts[i]  = amp[c][i];

        	timey[i]=y;

        

     	  }

     	  data['dd']=degToCompassArr(dir[c]);

     	  data['hh']=amp[c];

     	  var music_frame_idx = n_rows_data-c;

     }

     else {

     	 var c 			  = Math.round(y*8);

     	 for (i = 0; i < model_paxis.length; i++) {

        	y2disp_ts[i]  = model_amp[c][i];

        	timey[i]=y;

  

     	  }

     	  data['hh']=model_amp[c];

     	  data['dd']=degToCompassArr(model_dir[c]);

     	  var music_frame_idx = n_rows_data+c;

     }

    data['y'] = y2disp_ts;

    sourcedata.trigger('change');

    console.log(music_frame_idx);

    playByteArray(bouy_music['frame_wfs'][music_frame_idx]);

""")

``

···

On Sunday, January 17, 2016 at 7:13:20 PM UTC-8, gongming wei wrote:

I wrote emails to the author, but no feedback yet. Maybe he is enjoy his holiday recently somewhere. : )

By the way, there could be some type error of the the email address on the website. It should be " jeff dot knowles at gmail dot com" instead of " jeff dot knowles at gsnail dot com"

On Mon, Jan 18, 2016 at 10:54 AM, DAVID SAROFF (RIT Student) [email protected] wrote:

Gongming Wei,
Why not contact the person who programmed those graphics? His email address is on a linked page at
https://swellspect.herokuapp.com/about_me

On Sun, Jan 17, 2016 at 9:37 PM, gongming wei [email protected] wrote:

As introduced in the online tutorial @ “https://continuum-analytics.wistia.com/medias/f6wp9dam91”, the website of “https://swellspect.herokuapp.com/bouy/46026” does give really nice and fancy way to display the real time, history and forecast data together. From personal point of view, I really like it very much and would like to use in my project.

However, I have no idea how to reproduce the nice plots. (Actually I tried to use seaborn to plot the heatmap plot and use bokeh to plot the curved plot, however, cannot give one optimal results as shown on the website.)

I appreciate a lot if any people can give me any indication on how to reproduce the nice plots?

Thanks in advance.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/7950ea22-c7f2-4ad2-96af-b4ab96b6ad05%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

David P. Saroff
Rochester Institute of Technology
54 Lomb Memorial Dr, Rochester, NY 14623
david…@mail.rit.edu | (434) 227-6242

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CABMftcR_hK-UA60kAcSRj8PNr9hU85BB%2BotVtR%3DxVGBkxhfQSA%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

1 Like