matplotlib subplot shrinks automatically - python-3.x

Question

I am currently using matplotlib to plot my images to subplots and as there are many images (as much as 100), the subplots shrinks automatically as there are too many subplots.
subplots of 63 images
As you can see from the image, this is the issue I am currently facing.
I am wondering if there are any ways to fix the size of the subplots to prevent the automatic shrinking so they can be seen and also including a scrollable bar so that if there are over 100 images and all couldn't be fitted onto the figure, it will still maintain the size of the subplots and just allow the user to scroll and view all these images.
I am using TKagg backend.
I've tried doing:
fig = plt.figure(figsize=(8,8))
to maintain the size of the subplots but it seems that this doesn't fix the images as the images still shrunk.

Answer 1

I don't think matplotlib is the best module if you want to show a large number of images.
A good alternative might be Plotly, combined with dash.
pip install dash
This will make it possible to generate many images onto a webpage, which automatically enables scrolling. Also you can now add a manual slider, such that you can select the part that you want.
In order to give some reference I will display two minimal working examples.
Option 1
This is the solution closest to your specifications of generating a grid of images, through which you can scroll (when they become too big), but also requires dash_bootstrap for the formatting and pillow to convert images to base64.
It is build from two parts:
A numpy image convertor to base64, this is for serving the image as url to the html.Img component.
The dash app that creates a grid layout that will wrap around when changing the width or height value.
Part 1:
import base64
from io import BytesIO
from PIL import Image
def arr_to_b64(array, ext='jpeg'):
""" Convert an array to an image source that can be displayed."""
image = Image.fromarray(array)
if ext == 'jpg': ext = 'jpeg'
if ext == 'jpeg' and image.mode in ('RGBA', 'A'):
background = Image.new(image.mode[:-1], image.size, (255, 255, 255))
background.paste(image, image.split()[-1])
image = background
buffer = BytesIO()
image.save(buffer, format=ext)
encoded = base64.b64encode(buffer.getvalue()).decode('utf-8')
return f'data:image/{ext};base64, ' + encoded
part 2 (this is the dash server)
import numpy as np
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc # Extra import besides `dash`
app = dash.Dash(__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP])
images = np.random.randint(0, 255, (60, 30, 30, 3), dtype=np.uint8)
app.layout = html.Div(children=[
html.Div(id='image-output', className='d-flex flex-wrap justify-content-start m-5',
children=[html.Img(src=arr_to_b64(image), className='m-1', width=100, height=100)
for image in images])
])
if __name__ == '__main__':
app.run_server(port='8051', debug=True)
Output:
Option 2
This is a slightly simpler to create example without requiring any knowledge of bootstrap. But doesn't display a grid, but a slider. This slider makes it possible to select a specific image.
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
images = np.random.randint(0, 255, (60, 30, 30, 3), dtype=np.uint8)
app.layout = html.Div(children=[
dcc.Slider(id='image-number', min=0, max=60, value=0,
marks={key: str(key) for key in range(0, len(images), 5)},
tooltip=dict(always_visible=True, placement='top')),
html.Div(id='image-output'),
])
#app.callback(Output('image-output', 'children'),
[Input('image-number', 'value')])
def update_image(idx):
return dcc.Graph(figure=go.Figure(go.Image(z=images[idx])))
if __name__ == '__main__':
app.run_server(port='8051', debug=True)
It might be possible to do with matplotlib, but sometimes the alternatives are easier.
Hopefully this will help you further.