Add illustration for visual intuition of indexing and slicing

[unode]

This illustration has been used to help beginners understand why the last digit of a slice doesn't imply including another element.

The intuition makes a distinction between indexing, the number of the position, and slicing, the number of the gap between elements.

For step based slices, the alternative intuition is to create rows with the values and keeping only the first row.

@tobyhodges

[github-actions]

Thank you!

Thank you for your pull request 😃

🤖 This automated message can help you check the rendered files in your submission for clarity. If you have any questions, please feel free to open an issue in {sandpaper}.

If you have files that automatically render output (e.g. R Markdown), then you should check for the following:

• 🎯 correct output
• 🖼️ correct figures
• ❓ new warnings
• ‼️ new errors

Rendered Changes

🔍 Inspect the changes: https://github.com/swcarpentry/python-novice-inflammation/compare/md-outputs..md-outputs-PR-1118

The following changes were observed in the rendered markdown documents:

 04-lists.md                           |    3 +
 fig/python_indexing_slicing.svg (new) | 1092 +++++++++++++++++++++++++++++++++
 md5sum.txt                            |    2 +-
 3 files changed, 1096 insertions(+), 1 deletion(-)

What does this mean?

If you have source files that require output and figures to be generated (e.g. R Markdown), then it is important to make sure the generated figures and output are reproducible.

This output provides a way for you to inspect the output in a diff-friendly manner so that it's easy to see the changes that occur due to new software versions or randomisation.

⏱️ Updated at 2026-06-22 19:37:35 +0000

[Shorla]

Hi @unode, Thank you for taking the time to add the illustrations.
I'm looking to merge this pull request. Can I get another pair of eyes on this before merging? @ineelhere @noatgnu

[noatgnu]

There is potential problem with rendering this on different theme settings like dark or light mode because I am not able to see the text in many of the boxes when i open the image on its own.

[unode]

The illustration is an SVG with transparent background and has only been tested on light backgrounds.

Dark themes have not been tested. I wasn't aware that this is now part of the lesson pipeline.

It should be possible to extend the SVG to include support for dark themes but perhaps the easiest would be to force a light background rather than having it see-through.

[noatgnu]

It is not part of the pipeline for dark and light theme for any of the lesson I think. It is just that browser on a dark mode desktop device. This is just me opening the image independently in another tab on the browser and all the transparent text boxes become dark. I think all the text boxes should have solid color background to avoid this native browser background.

[unode]

I can't replicate your experiences with dark mode settings.
On my system it looks fine:

The raw SVG "page" also looks fine to me regardless of which settings I change.

@noatgnu could there be something else causing the visual artifacts you showed in your screenshot above?
And did you open the SVG directly or rendered it with The Carpentries Workbench?

I'm on Firefox, Linux, and to me it looks like the screenshot above. Dark mode takes the soul out of it and makes it suffer from contrast issues but is still visually consistent.

[noatgnu]

I am in windows and opening the image on the post on both chrome and firefox but not the raw svg. If I open the raw svg it works. However, if I open the image right in message of the pull request. github probably mess up svg somehow and the transparency make it dark. So I think it is a github issue. This is what I see under the message at the top without clicking into a separate tab. As raw svg it should display fine without any problem only the github asset conversion that is causing problem above.

[unode]

Ah wait, the screenshot you pasted above is from the PNG that I included for preview.

Try this instead for the direct SVG rendering:

[unode]

I see now here that the 2 in the first line has very little contrast. I'll update the image and darken the yellow slightly.

[unode]

Small change for better contrast on the yellow numbers.

[unode]

Looks a little better in dark mode as well

[Shorla]

@unode This is so much better! I would merge this. Thank You for your contribution!