[ENH] Changing Widget Layout to enlarge chart size

[bmorvaj]

Hello,

I'm not sure if this is the right place to ask.

I like Lux! Great work!

I was wondering is it possible to change the size of the widget, especially when exporting it as html? I find the height a bit small and it would be greate if you could increase the hight (and width).

I managed to increase the size of the figures but I am struggling with the size of the frame/div.

[dorisjlee]

Hi @bmorvaj, Thank you for your interest in Lux and I'm glad to hear that you like using Lux!

When you refer to the size of the widget when exported as HTML, I'm guessing you are referring to the save_as_html command in Lux. In the static HTML export case, the size of the whole widget is currently fixed to the width be adaptive to the width of your browser window.

I think what you might be referring to (based on your screenshot) is customizing the size of each of the visualization (and the frame/div around each vis). Lux does not currently have any setting that allows users to adjust the width and height of the visualization. The only way to currently change the width and height for each visualization is to export each visualization to code in Altair, matplotlib, or VegaLite, then users can manually configure the width and height for each visualization via the respective commands in those libraries. It would be useful to understand whether you are interested in 1) changing the size for all visualizations in the widget as a global setting or 2) only changing the size of a single selected visualization. This will help us better understand whether there is a way to better support the issue that you raised.

[bmorvaj]

Hi @dorisjlee ,

Thanks for your quick reply!

Sorry for not being clear enough. Yes, I'm primarely talking about save_as_html() and more specifically the height.

The reasoning is:

• I would like to share some of the insights to the (non-technical) team members so HTML is the perfect output. However, a small height (and size in general) doesn't make it very userfriendly and presentation friendly.
• When dealing with a large dataset, it would be useful to make the plots larger and potentially zoom in. It's difficult now to make a more detailed conclusions with a such small widget size. This would mean that the widget size in jupyter notebook should be bigger as well.

So to directly answer your question - I would be interested in both.

On my side, I did a very simple hacky thing - in frame.py I added to save_as_html() this line : manager_state = manager_state.replace('"width": 150', '"height": 600') - and plan to make the size as input arguments for save_as_html(). This way I can control the figure sizes in HTML directly. What I'm still strungling is that in HTML file itself, the div frame itself is static and limited to height of 356 pixels. I can get around that using Firefox inspector (F12) and adding height to all div tags but this is super time consuming. I still need to find a programatic way to do it. Any idea how to do it automatically/programatically?

This is more or less what I would like without editing it manually in Firefox:

[dorisjlee]

Hi @bmorvaj, You bring up a really good point about the need for enlarging the figures programmatically for the widget, especially for presentational purposes. Based on your feature request, we are now working on adding a programmatic scaling factor for each chart so you could set something like lux.config.chart_scale=2 and expect the widget (and thus the exported HTML) to have 2x its original size across all charts in the widget. Hopefully, this would mean that you would not have to edit the HTML directly to try to enlarge the charts manually. I'll let @micahtyong follow-up with additional details and questions as he will be working on adding this new feature into Lux.

[bmorvaj]

Awesome, thanks!

[micahtyong]

Hi @bmorvaj, I've created a pull request that addresses your problem statement in #333. Feel free to take a look at the result!

[bmorvaj]

@micahtyong Thanks! I haven't tested it but it looks good! One question - can you also control the size of "Current Visualization"? It's not clear from the screenshot.

[micahtyong]

Hi @bmorvaj, currently this is not implemented, and I made that decision mostly because if the "Current Visualization" is scaled up, there would be much less real estate for the related visualizations on the right.

Is there a specific use case for having the "Current Visualization" scaled up as well? Current visualizations are pulled from the widget before intent is applied, so there's always the option of exporting the scaled singular graph as well.

[bmorvaj]

Hi @micahtyong, similar reason as above. If you want to explore something or it's shown in a "presentation" document, it should be easily readable by everyone. People will ask why is "Current Visualization" so small. One option could be to shift from left/righ scrolling of "You migh also be interested in..." to up/down (horizontal vs vertical).

[micahtyong]

Hi @bmorvaj, I've updated #333 to address your use case. Let me know what you think.