Hi all,
I’d been meaning to make a demo of responsive* plots and Andrew’s question yesterday prompted me to.
You can see the notebook here:
Although I was imagining this for people who want to embed their plots in web pages, it also works in nbviewer which means you can now share your ipython notebook plots and they’ll resize to whatever browser size they’re opened in!
Best,
Bird
This is very nice Bird!!!
We should eventually make this part of Bokeh itself…
Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…
Cheers.
Nice! +1 for this in Bokeh. I’ve made a similar function for an application of mine but I’d love to have this standard and built in and more robust - resizing grid plots as well (and even optionally scaling of all the plot attributes to deal with the case when things start looking silly when the plot is too small).
On Jun 6, 2015, at 3:52 AM, Damian Avila [email protected] wrote:
This is very nice Bird!!!
We should eventually make this part of Bokeh itself…
Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…
Cheers.
–
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/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Resizing grid plots - yes!
Resizing attributes - totally agree - I’ve had this problem myself but didn’t have much time to solve it so I just set a minimum size. When I asked around quickly rescaling text seemed to be non-trivial did you find a solution to this?
Best,
Bird
On Sat, Jun 6, 2015 at 8:25 PM, Ryan Hafen [email protected] wrote:
Nice! +1 for this in Bokeh. I’ve made a similar function for an application of mine but I’d love to have this standard and built in and more robust - resizing grid plots as well (and even optionally scaling of all the plot attributes to deal with the case when things start looking silly when the plot is too small).
On Jun 6, 2015, at 3:52 AM, Damian Avila [email protected] wrote:
This is very nice Bird!!!
We should eventually make this part of Bokeh itself…
Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…
Cheers.
–
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/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
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/578DE9BA-A30E-4459-A70E-2E172D26E0CE%40gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Thanks Damian - I had no idea!
On Sat, Jun 6, 2015 at 12:52 PM, Damian Avila [email protected] wrote:
This is very nice Bird!!!
We should eventually make this part of Bokeh itself…
Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…
Cheers.
–
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/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
I have a hacky solution from the interwebs for scaling everything in a plot that seems to be “not advised” for production use.
Basically I just use the scale css transform:
$.fn.zoomscale = function(x) {
if(!(this).filter(':visible').length && x != 1) return (this);
if(!$(this).parent().hasClass(‘scaleContainer’)){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth': $(this).width(),
'originalHeight': $(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x == 1)
$(this).unwrap().css('position','static'); else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
The x parameter is the scale factor - so you just need to compute the scale required to get from the original size to the desired size.
This of course works with grid plots as well. However it can mess up the hover tool, etc. and doesn’t work well for scaling up.
Ideally it would be nice to have a native resize that allows for scaling of all plot elements, maybe down to an optionally specified minimum (e.g. text cannot get smaller than 6px or something) with the idea in mind that the user specified the size attributes at the originally specified plot width/height for a reason and would like the aesthetic preserved as the plot is resized.
On Sat, Jun 6, 2015 at 8:25 PM, Ryan Hafen [email protected] wrote:
Nice! +1 for this in Bokeh. I’ve made a similar function for an application of mine but I’d love to have this standard and built in and more robust - resizing grid plots as well (and even optionally scaling of all the plot attributes to deal with the case when things start looking silly when the plot is too small).
On Jun 6, 2015, at 3:52 AM, Damian Avila [email protected] wrote:
This is very nice Bird!!!
We should eventually make this part of Bokeh itself…
Just a tiny comment: from IPython.display you can import Javascript instead of HTML and get rid of the ugly form…
Cheers.
–
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/CAM9Ly3EdZOXfeRAMhAomkfE1NEij1tLo3s6wwq1rbzWoR9n58Q%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
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/578DE9BA-A30E-4459-A70E-2E172D26E0CE%40gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.