ENH: Set a default image size across all lectures

[mmcky]

This PR sets a default image size to 75% of page width throughout the lectures for code generated figures.

• remove current size settings in inequality lecture
• @mmcky to add general config to manual.quantecon.org

```{code-cell} ipython3
---
mystnb:
  figure:
    caption: "2016 US Lorenz curves"
    name: lorenz_us
  image:
    alt: lorenz_us
    classes: shadow bg-primary
    width: 75%
---
fig, ax = plt.subplots()

ax.plot(f_vals_nw[-1], l_vals_nw[-1], label=f'net wealth')
ax.plot(f_vals_ti[-1], l_vals_ti[-1], label=f'total income')
ax.plot(f_vals_li[-1], l_vals_li[-1], label=f'labor income')
ax.plot(f_vals_nw[-1], f_vals_nw[-1], label=f'equality')

ax.legend(fontsize=12)   
plt.show()
```

sound be

```{code-cell} ipython3
---
mystnb:
  figure:
    caption: "2016 US Lorenz curves"
    name: lorenz_us
  image:
    alt: lorenz_us
    classes: shadow bg-primary
---
fig, ax = plt.subplots()

ax.plot(f_vals_nw[-1], l_vals_nw[-1], label=f'net wealth')
ax.plot(f_vals_ti[-1], l_vals_ti[-1], label=f'total income')
ax.plot(f_vals_li[-1], l_vals_li[-1], label=f'labor income')
ax.plot(f_vals_nw[-1], f_vals_nw[-1], label=f'equality')

ax.legend(fontsize=12)   
plt.show()
```

@HengchengZhang would you be able to run some searches and remove the width setting (unless you think it is sized specifically for some other reason). We are trying to standardise image sizes across the lecture for consistency with this global setting.

[netlify]

✅ Deploy Preview for taupe-gaufre-c4e660 ready!

Name	Link
🔨 Latest commit	f217bde
🔍 Latest deploy log	https://app.netlify.com/sites/taupe-gaufre-c4e660/deploys/644b9bc96642210008a42b3e
😎 Deploy Preview	https://deploy-preview-165--taupe-gaufre-c4e660.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

🚀 Deployed on https://644b9fcf00822203fee3c17d--taupe-gaufre-c4e660.netlify.app

[HengchengZhang]

Hi @mmcky, I've removed the width settings in inequality.md, do we need to apply this to other lectures like newtorks.md?

[mmcky]

Hi @mmcky, I've removed the width settings in inequality.md, do we need to apply this to other lectures like newtorks.md?

@HengchengZhang if you could do a sweep of all the lectures in this repo that would be great 👍

[HengchengZhang]

Hi @mmcky, I've removed the width settings in inequality.md, do we need to apply this to other lectures like newtorks.md?

@HengchengZhang if you could do a sweep of all the lectures in this repo that would be great 👍

Thanks @mmcky, for the figures that are set with plt.figure(figsize=[*, *]) but with no caption embedded

1. do we need to remove the size settings and use global config for all
2. do we need to add the myst-nb settings like classes: shadow bg-primary to make them look consistent because in some lectures figures have shadows on its edge and some are just simple matplotlib figure
3. if so I suggest we can add this part to our style guide and also to the configuration yml file.

[mmcky]

Some of this will need some experimenting. Thanks @HengchengZhang for investigating further.

do we need to remove the size settings and use global config for all

Does the fig size or jupyter-book take precedence?

do we need to add the myst-nb settings like classes: shadow bg-primary to make them look consistent because > in some lectures figures have shadows on its edge and some are just simple matplotlib figure

This is a good idea. Can you review the docs for myst-nb to check how to set this.
https://myst-nb.readthedocs.io

if so I suggest we can add this part to our style guide and also to the configuration yml file.

👍

[HengchengZhang]

Hi @mmcky,

Does the fig size or jupyter-book take precedence?

My testing result shows that jupyter-book has higher precedence.

The results are quite intersting

• The use of width: 75% is not conflit with figsize because figsize sets the ratio of width and height and width: 75% only adjust it to 75%
• The plt.figure(dpi = *) can be conflit with global settings and the figure size will base on plt.figure(dpi = *)
• The setting in a code cell like below will override the global settings

---
mystnb:
  image:
    width: 100px
---

This is a good idea. Can you review the docs for myst-nb to check how to set this.
https://myst-nb.readthedocs.io

Modify the global settings in _config.yml

nb_render_image_options:
      width: 75%
      classes: shadow bg-primary

works well in my local environment.

If that looks good to you I will apply this change and see if this works for all lectures in this repo(when removing the width settings).

[HengchengZhang]

A note to myself @HengchengZhang

• Remove all settings related to figure size: figsize, width, size $\ldots$
• Remove all individual MyST-NB: image: classes: settings
• Add the above to global configration _config.yml
• Add this section in Configuration & Tools in QuantEcon Manual.

[HengchengZhang]

Hi @mmcky, when I'm lokking into long_run_growth.md I found you used dpi settings in plt.figure

lecture-python-intro/lectures/long_run_growth.md

Lines 133 to 136 in a0fa02f

	```{code-cell} ipython3
	fig = plt.figure(dpi=110)
	gdppc['GBR'].plot(ax = fig.gca())
	```

I’m wondering is there a specific reason for this dpi = 110 and not other higher number? Because I think 110 is not quite a high resolution overall and I’m not sure if there is a trade-in with the performance or something else.

Another way to make the figure looks better is to make it wider like plt.rcParams["figure.figsize"] = (11, 5) and it looks actually not bad.

[mmcky]

I’m wondering is there a specific reason for this dpi = 110 and not other higher number? Because I think 110 is not quite a high resolution overall and I’m not sure if there is a trade-in with the performance or something else.

@HengchengZhang it was to increase the quality from the default image being returned. Feel free to raise this to a higher number (i.e. 300) and then the default size should now scale the image.

[mmcky]

nice work on this so far @HengchengZhang.

@jstac the deployment shows what we have currently set the image size too. I am wondering if we should go up to 80% or even 85%. Such as across this lecture: https://6440ec408ea47d5c6a90e4cb--taupe-gaufre-c4e660.netlify.app/business_cycle.html

Also do you like the shadow?

It is really nice having the same sized image.

[mmcky]

thanks @HengchengZhang this is looking great. @jstac let's merge this soon -- given the impact on a number of lectures.

[jstac]

Great work @HengchengZhang !!

So nice to have your help getting this in order :-)

I agree we could come up to 80% and I think I prefer without the shadow --- it's nice, but without shadow is a bit more "academic".

Please merge when ready.

[jstac]

Actually guys, I wonder what the best order is for merging. Let me discuss this with @mmcky .

I'll just do a spin through the other PRs.

[mmcky]

thanks @jstac we merged the others and will fix the merge conflict in this PR. Thanks @HengchengZhang

[mmcky]

@HengchengZhang did you get a chance to review these merge conflicts?

[HengchengZhang]

Hi @mmcky, sorry about the delay. I've fixed the conflicts and should be able to merge now.

[mmcky]

no worries @HengchengZhang thanks for your work on this.