slides-eng.qmd

---
execute:
  echo: true
format:
  revealjs:
    width: 1245
    height: 700
    menu: false
    controls: true
    transition: fade
    auto-stretch: false
    embed-resources: true
    toc: false
    center: true
    slide-number: false
    preview-links: false
    output-file: "slides-eng"
    theme:
        - simple
        - style/style_background.scss
---

## Use the arrows to navigate the presentation.

--- 

## { .custom-title }

  

---

##

**Death by PowerPoint (noun):**

A painful experience caused by a long, boring presentation with too many slides filled with text, small fonts, and endless bullet points. 

Common symptoms include sleepy eyes, yawning, and a strong desire to escape. 

Example: "After an hour, I felt like I was dying by PowerPoint."

*(See also: meeting purgatory, presentation torture)*

::: {.notes}
(Reading with plain monotone voice)
Well, that slide was a perfect example of death by powerpoint.
Too much text, monotone voice. That's exactly what you need to avoid.
:::
---

## { .custom-title }
::: {style="position: absolute; left: 700px; top: 550px; width:2000px; background-color: #ffffff; padding: 10px; border-radius: 5px;"}
[Avoiding "Deaths by PowerPoint"]{style="font-size: 20px; margin: 0px;"} <br>
[Data Storytelling and Python to the rescue]{style="font-size: 30px; font-weight: bold; margin: 0px"} <br>
[Sebastián Flores, PyCon US 2024, May 18th]{style="font-size: 25px;"}
:::

::: {.notes}
Welcome to my talk: Avoiding deaths by powerpoint - Data Storytelling and Python to the rescue.

Just to be fair, deaths by powerpoint are not caused by the software. It's the speaker that lacks data storytelling tools and skills to make it more engaging! 
:::
---

## About me
::: columns
::: {.column width="40%"}
![](images/seba_avatar_gmail.png){fig-align="center"}
:::
::: {.column width="60%"}
&#32;<br>

* Sebastián Flores aka sebastiandres
* Member of Python Chile
* Collaborator to Streamlit and Vizzu
* Chief Data Officer at uPlanner
:::
:::

::: {.notes}
My name is Sebastian Flores, you can find me as sebastiandres on most sites - wink wink you can follow me on github, twitter and linkedin. 
I’m part of the Python Chile team, organizing the PyCon Chile and PyDay Chile events.
I also collaborate with the libraries Streamlit and Vizzu.
My real job is CDO at uPlanner.
:::

---

## Agenda { .custom-slide }
::: columns
::: {.column width="30%" .incremental}
* &#32;
* No
* Nope
* No chance
:::
::: {.column width="70%" .fragment}
**Storytelling principle #1:** 

Never give away the ending!

Always raise the stakes! 
:::
:::

::: {.notes}
Let's review in detail everything that I will cover on the presentation.

Lesson #1 of Storytelling.
NEVER kill the suspense. 
Don't give up the reveal. 
No book or joke starts by revealing the ending, why would you? 
Only explain the content if it raises the stakes and makes it more interesting!
:::

---

## { .custom-section }
[Data Storytelling]{style="font-size: 1em"}

[Why Data Storytelling?]{style="font-size: 1.5em"}

::: {.notes}
OK, so, why data storytelling?
:::
---

## ¿Storytelling?
::: columns
::: {.column width="50%"}
![](images/fire.jpeg){fig-align="center"}
:::
::: {.column width="50%" .fragment .center}
&#32;<br><br><br><br>
Stories are 

the first human technology
:::
:::

:::{.notes}
People have been telling stories since the begining, because it's just the way our brains work. 
[click]
It's a "built-in technology" because it allows for knowledge transmission. 
It allows collective learning and cooperation at small and large scale.

Stories are not a random collection of facts. There's a very specific order: start, conflict, conflict resolution, ending. 
That's the pattern that the brain craves, because it can learn from it. That's why we consume so much stories in any form: books, comics, tv-series, movies, etcetera.
So, what do you do when you know how something works? You hack it, of course!
:::

---

## Ohh, those hackable brains
::: columns
::: {.column width="45%"}
Peak-End Rule
![](images/storytelling/sketplanation.png){fig-align="center"}
Image by sketplanation
:::
::: {.column width="55%" .fragment}
![](images/storytelling/got.jpg){fig-align="center"}

[Game of Thrones rating, by Kelvin Neo]{.fragment}
:::
:::

:::{.notes}
The peak-end rule is a fun fact. You remember something for:
What was the most intense emotion
How it ended
You can use this to build your presentation around the big ending you want. 
If you are not convinced, let me give you a real example. 
[click]
We, collectively, enjoyed 7 seasons of this great tv series. Can you guess wich one it is?
[click]
Yes, the whole game of thrones series is remembered by the not-so-great ending and the peak scenes (do you remember the red wedding?)
What's really interesting is that is not symmetrical. We can forgive a bad first season, but never a bad grand finale. Endings matter!
:::

---

## 
::: columns
::: {.column width="60%"}
&#32;<br><br><br>
Data Storytelling:  

Using storytelling **tricks** to create presentations that will be **remembered** and that **create impact**

:::
::: {.column width="40%" .fragment}
![](images/sherlock.jpeg){fig-align="center"}
:::
:::

. . .

::: {style="text-align: center;"}
Emotions create actions
:::

:::{.notes}
We are only as good as our communication skills. If you’re really really good, but cannot articulate your ideas and communicate effectively, you’ll only be as good as someone bad but with great communication skills. 
Think of storytelling is a bag of tricks you can use to make better presentations.
Presentations that will change something on your audience.
[click]
Think of Sherlock Holmes. We enjoyed his stories, not because he was a genius, but  because of how Doctor John Watson describe the cases. It’s not enough to crack the case and solve the mystery. We need to be able to collect the important facts and to tell an engaging story. 
[click]
The key point is: Only emotions create actions.
:::

---

## The best example

::: columns
::: {.column width="30%" .fragment fragment-index=1}
![](images/storytelling/spotify1.jpeg){fig-align="center"}
:::
::: {.column width="40%" .center}
&#32;<br><br>
How to make millions of people share statistics on social media?
:::
::: {.column width="30%" .fragment fragment-index=1}
![](images/storytelling/spotify2.jpeg){fig-align="center"}
:::
:::


:::{.notes}
Would you agree to spend 10 minutes to share on social media about some data statistics a company made? No? Well, I’m pretty sure you did.
[click]
You probably remember Spotify wrapped. 
Can you remember how you felt after you saw your yearly data analysis? After all, it's just some stats, but it feels more than that. Personally, I always learn something about my musical taste, and it's weird to see that it has changed over the years. Anyway. It's engaging because it's told as a story. Not cold numbers.
:::

--- 

## { .custom-section }

[Data Storytelling]{style="font-size: 1em"}

[Tool #1: Visualization]{style="font-size: 2em"}

:::{.notes}
So, let me tell you about how visualization and storytelling are related.
:::

---

## Data Exploratory Viz

![](images/viz/looker.png){width=400 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"}

. . .

![](images/viz/tableau.png){.absolute top=125 left=25 width=800 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"}

. . .

![](images/viz/pbi.png){.absolute top=150 left=50 width=800 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"}

. . .

[Too many options! <br> User **cannot** be responsible of finding your insights.]{ style="background-color: #fff" }

:::{.notes}
Google Looker [click] Tableau [click] PowerBI.
As the name suggests, they are great tools to explore your data. This is a previous step to telling a story. This would be the equivalent to do the footwork of a reporter. Getting the news.
But exploratory visualization is not what you need on your presentation. 
You need to CRAFT what YOU want your audience to see.
[click]
Your audience is not resposible of finding the insights. You are.
:::

---

## { .custom-slide }
::: columns
::: {.column width="10%"}
&#32;
:::
::: {.column width="70%"}
**Storytelling principle #2:** 

Details are important, 

[but not **all** details are important.]{.fragment}
:::
:::

:::{.notes}
So, details are important. [click] But not all details are important.
On writing this is called the Chekhov's Gun: 
If in the first act you describe a pistol hung on the wall, then the pistol must be fired at some point. Otherwise don’t put it there. (Chekhov's Gun)
:::

---

## Data Explanatory Viz

::: columns
::: {.column width="70%" .incremental}
So many good python libraries!

* Classic: Matplotlib
* Rising starts: Seaborn, Plotly, Altair
* Other: bokeh, plotnine, pygal and more!
:::
::: {.column width="30%"}
![](images/viz/matplotlib.png){fig-align="center"}
:::
:::

. . . 

::: {style="text-align:center"}
Pick one and master it
:::

:::{.notes}
To do explanatory visualizations, you need to KNOW what you want to share.
We are lucky to have so many great python libraries: [click]
The old classic matplotlib [click]
Seaborn, plotly, altair [click]
bokeh, plotnine, pygal, and many others!
[click]
My advice: pick one and master it. You need to escape from default settings to do good data visualizations! 
:::

---

## 
::: columns
::: {.column width="50%"}
![](images/dst_before.png){fig-align="center"}
:::
::: {.column width="50%" .fragment}
![](images/dst_after.png){fig-align="center"}
:::
:::

. . .

Don't share numbers. Share a story.

[(C) Storytelling with Data, por Cole Nussbaumer Knaflic.]{style="font-size: 0.75em; color: gray"}


:::{.notes}
Let me share an example from one of my favorite books on data storytelling.
Here you can see a visualization with a standard, default visualization. 
Nothing wrong with it. But it's boring.
[click]
Now, let's use the same data but reveal the story behind. You see things on a completely different perspective. You just put numbers where are needed, and call for an action! 
[click]
So, don't share numbers. Share a story. 
:::

---

## Vizzu: A Data Storytelling library in JS & Python

```{python}
#| echo: false

import pandas as pd
from ipyvizzu import Data, Config, Style
from ipyvizzustory import Story, Slide, Step

# Import the date
df = pd.read_excel("./data/python_conference.xlsx", 
            dtype={"year": str, "location": str, "attendees": int, "type":str})
df["year_num"] = df["year"].astype(int)

# Create story object, add data to it
data = Data()
data.add_df(df)
story = Story(data=data)

# Set the size of the HTML element and activate tooltip
story.set_size("100%", "600px")
story.set_feature("tooltip", True)

# Visualization 1
slide = Slide(
    Step(
        Config.stackedColumn(
            {
                "x": "year",
                "y": "attendees",
                "title": "Pycon Attendees",
            }
        ),
        Style({"plot": {"xAxis": {"label": {"angle": 2.0}}}}),
    )
)
story.add_slide(slide)

# Visualization 2
slide = Slide(
    Step(
        Config.stackedColumn(
            {
                "x": "year",
                "y": "attendees",
                "stackedBy": "type",
                "title": "Pycon Attendees per type",
            }
        ),
        Style({"plot": {"xAxis": {"label": {"angle": 2.0}}}}),
    )
)
story.add_slide(slide)

# Visualization 3
slide = Slide(
    Step(
        Data.filter("record.year_num >= 2021"),
        Config.stackedColumn(
            {
                "x": "year",
                "y": "attendees",
                "stackedBy": "type",
            }
        ),
        Style({"plot": {"xAxis": {"label": {"angle": 2.0}}}}),
    )
)
story.add_slide(slide)

# Visualization 4
slide = Slide(
    Step(
        Config.percentageColumn(
            {
                "x": "year",
                "y": "attendees",
                "stackedBy": "type",
                "title": "Pycon Attendees per type (percentage)",
            }
        ),
        Style({"plot": {"xAxis": {"label": {"angle": 2.0}}}}),
    )
)
story.add_slide(slide)

# Play the created story!
story.play()
```

:::{.notes}
Now, let me share a JS & python library to do data storytelling.
This is an example that I created yesteday, based on wikipedia and the numbers shared by Mariata on the pycon opening.
As we can see, the attendance numbers were rising until covid hit.
But how is in-person versus onsite attendance?
[click]
It seems that online attendance is decreasing, so let's explore this as a percentage.
[click]
Well, it seems to be true. Who can blame them? It's much better to be onsite!
:::

---

## { .custom-section }

[Data Storytelling]{style="font-size: 1em"}

[Tool #2: AI]{style="font-size: 2em"}

:::{.notes}
Let's now discuss another interesting tool: Artificial Intelligence.
:::
---

## { .custom-slide }
::: columns
::: {.column width="10%"}
&#32;
:::
::: {.column width="70%"}
**Storytelling principle #3:** 

Your first draft is always going to be terrible.
:::
:::

:::{.notes}
I want to relate this point to storytelling principle #3: Your first draft is not gonna be good. Deal with it.
:::
---

##
::: columns
::: {.column width="60%"}
&#32;<br><br>

* Use AI chatbots for: 
  * Analogies and examples
  * Prompts to create better images!
* Don't search for images, create them!
:::
::: {.column width="40%" .fragment}
![](images/ai/choice.jpeg){fig-align="center"}
:::
:::

:::{.notes}
AI can also be a good source of inspiration and help when making better presentations.
It's really helpful to create images to complement your talk and illustrate your points. Use it to get ideas, analogies, examples, or event prompts to create better images. You can use AI to get your first draft very fast, and iterate from there.
Think of AI as the friend that gives you some good and bad ideas. It's your responsability to select the good ones! For every image I put on the presentation, there are 10, 20 or more that I did not use!
:::

---

## { .custom-section }

[Data Storytelling]{style="font-size: 1em"}

[Tool #3: Presentation]{style="font-size: 2em"}

:::{.notes}
Probably one of the tools where you can improve the most: presentation software.
:::

---

## { .custom-slide }
::: columns
::: {.column width="10%"}
&#32;
:::
::: {.column width="70%"}
**Storytelling principle #4:** 

[Show]{style="color: green"}, [don't tell.]{style="color: red"}
:::
:::

:::{.notes}
So this storytelling principle is one of the simplest but one of the hardest.
Show, don't tell. Let me give you an example.
:::

---

## [Show]{style="color: green"}, [don't tell.]{style="color: red"} 

::: columns
::: {.column width="50%" .fragment fragment-index=2}
[Guido's eyes lit up as the terminal finally executed without errors. A wide grin spread across his face. He jumped up from his chair, fists raised in triumph. "Yes!" he exclaimed, as he savored the moment of triumph with a deep, contented sigh.]{style="color: green"}
:::
::: {.column width="50%" .fragment fragment-index=1}
[Guido was happy because he solved the bug on his code.]{style="color: red"}
:::
:::

:::{.notes}
Can you tell the difference between these two examples?
[click]
[click]
You cannot tell someone to feel something. You have to give them the means and reasons to feel somthing.
:::

---

## Presentation tools

* Classic: PowerPoint
* **"Show don't tell" tools: quarto, jupyter + RISE, streamlit**
* Other: canvas, revealjs, prezi

:::{.notes}
This relates to presenting software because the classic powerpoint software is not very helpful to share code. 
To be honest, I fine tune my presentations till the last minute - inserting code screenshots is not fun! There are better ways.
There are a couple of "show dont tell" tools: quarto, jupyter + RISE, and streamlit.
Let me show you a bit of them.
:::
---

## 

::: columns
::: {.column width="60%"}
&#32;<br><br>
[quarto]{style="font-size: 1em; color: gray"}

An open-source scientific and technical publishing system.

Focus on scientific markdown, dynamic & interactive documents based on code (Python/R/Julia).
:::
::: {.column width="40%"}
![https://quarto.org/](images/quarto/quarto2.png)
:::
:::

:::{.notes}
Quarto is a project from POSIT - they are actually on one of the booths, go get some stickers! You create a plain markdown, so the files and repos are clean and easy to maintain. You can create pretty much anything: Books, websites, and presentations. It’s quite incredible. This presentation has been made in quarto, BTW. For presentations, the markdown file is rendered into a html page with the revealjs library. It’s just a html webpage, so you can share it around and people should be able to open it without to much trouble - or convert it to pdf. 
:::

---

## 

::: columns
::: {.column width="40%"}
[Code: example.qmd]{style="font-size: 0.5em; color: gray"}

```
---
title: "Habits"
author: "John Doe"
format:
  revealjs:
    transition: fade
    theme: black
    toc: true
    center: true
---

## Getting up

- Turn off alarm
- Get out of bed

---

## Going to sleep 
::: { .incremental }

- Get in bed
- Count sheep

:::
```
:::

::: {.column width="60%"}
[Slides: example.html]{style="font-size: 0.5em; color: gray"}

```{=html}
<iframe width=600 height=400 src="quarto_min.html"></iframe>
```
:::
:::



:::{.notes}
So here on the left I have the code that produces the slides on the right.
As you can see, it's just a plain file.
It starts with a configuration part, and lots of other options are possible.
You get the table of contents for free (if you want it!)
You can even do incremental slides or reveal by fragments.
You have to compile/render before the presentation, so little changes of getting errors during the presentation.
But - it cannot do realtime code execution. It's not design for.
:::

---

## 

::: columns
::: {.column width="40%"}
&#32;<br><br>

[Jupyter + RISE]{style="font-size: 1em; color: gray"}

Jupyter extension to display notebooks as revealjs slides.
:::
::: {.column width="60%"}
![https://rise.readthedocs.io/](images/rise/rise.png)
:::
:::

:::{.notes}
An alternative to quarto is to use jupyter notebook and use the rise extension.
You have to manually define each of your cells to be a part of a slide or to be skipped.  
:::
---

[Jupyter + RISE]{style="font-size: 1em; color: gray"}

<img style="width:100%;" src="./images/rise/basic_usage.gif">

:::{.notes}
You click on the "launch slideshow" button, and a dynamic presentation is created on the fly. Same as quarto, it uses the revealjs javascript library as backend, but it can execute python code (or your kernel's language) on the fly. This is very useful if you are running a tutorial or something that needs that kind of interactivity.
:::
---

## 

::: columns
::: {.column width="60%"}
&#32;<br><br>

[Streamlit]{style="font-size: 1em; color: gray"}

All python and as interactive as you can to code it...
:::
::: {.column width="40%"}
![https://streamlit.io/](./images/streamlit/streamlit.png)
:::
:::

:::{.notes}
And finally, streamlit. Streamlit is a python library to build python webapps - very fast, very pythonistic. But probably not the library you expected to see for presentations. 
:::

---

## 

[Streamlit]{style="font-size: 1em; color: gray"}

<img style="width:100%;" src="./images/streamlit/pyconchile2021.gif">

:::{.notes}
Sometimes it just makes sense. I did a presentation on PyCon Chile 2021 about Streamlit, and it felt natural to explain the library using the library to create the presentation. It made sense, as I could show the code and execute the code, without having to go back and forth between a presentation and a terminal. The main point is, again, Show dont tell. On presentations about code, don't tell me how to use it, show me how to use it!
:::
---

## A decision flow
::: { .incremental }

* PowerPoint: Single use no-code presentation
* Quarto: Talks from related documents (books, articles)
* Jupyter + RISE: Workshops or classes. Executing code is important
* Streamlit: Customized/experimental presentations
:::

:::{.notes}
My decision flow to choose a presentation sofware goes as:
[click]
PowerPoint: Single use no-code presentation. When I have no time. 
[click]
Quarto: Talks from related documents (books, articles) - but no need to execute code!
[click]
Jupyter + RISE: Workshops or classes. Executing code is important.
[click]
Streamlit: Customized/experimental presentations. 
Nevertheless, I still follow the data storytelling principles. It's just the software that it changes. I have to confess, my slides are kind of my babies. I spent too much time on them, tweaking, changing small details only I will notice, learning how to push the software a bit beyond limits. I think people can notice when you put love into something. 
:::

---

## { .custom-section }
[End]{style="font-size: 2em"}

:::{.notes}
So, let's wrap up.
:::

---

## Two stories
::: {.columns style="text-align: center"}
::: {.column width="10%"}
:::
::: {.column width="40%" .fragment}
![](images/wrapup/finding_missing_piece.jpeg){fig-align="center"}
Data Storytelling for me
:::
::: {.column width="40%" .fragment}
![](images/wrapup/new_tool.jpeg){fig-align="center"}
Data Storytelling for you?
:::
:::

:::{.notes}
Let me share two stories with you. 
[click]
For me, storytelling has been a sort of revelation. 
It has become a sort of "unified model" of communication that is common to science, programming, books, movies and pretty much everything.
[click]
I hope I have been able to share the benefits and importance of using Storytelling and Data Storytelling on your presentations. I think it can be an important tool to add to your set of tools and skills, if you invest some time on it.
:::

---

## I believe that... { .custom-slide }
::: columns
::: {.column width="5%"}
:::
::: {.column width="90%" .incremental}
&#32;<br><br>

* Data Storytelling is a crucial skill
* YOU can learn Data Storytelling skills and tools
:::
:::

:::{.notes}
I believe that:
- Data Storytelling is a very VALUABLE skill
- Using some of these tools and skills can help you CRAFT better presentations and 
make your ideas SHINE.
You CAN become a better presenter.
Learn a new skill: Storytelling or Data Storytelling
Learn a new tool: quarto, jupyter + RISE, or Vizzu. 
So, propose a talk at any event and practice. I didn't knew quarto before this presentation!
:::

---

## Feedback
```{mermaid}
%%| echo: false
flowchart LR
  A{"Liked the talked?"} --> |Yes| B{"Answer feedback?"}
  A --> |No| B
  B --> |Yes| C{"Keep in touch?"}
  C --> Z["Thanks for coming to my talk!"]
  B --> |No| Z
```

:::{.notes}
If you like the talks - and specially if you disliked the talk - share your thoughts! 
I love getting feedback from my presentations, because it has helped me improve my skills and get ideas on how to improve the content and slides.
All this material is on my github, but if you want you can share your email at the end of the survey and I will send you an email from my personal email with links and stuff, and we can keep in touch! If you don't want to answer the survey that's OK too! I just want to make things easier for you!
:::

---

## 
::: {.columns style="text-align: center"}
::: {.column width="10%"}
:::
::: {.column width="40%"}
![](images/survey/QR_code_english.png){fig-align="center"}
https://tinyurl.com/ycxj9ep5
:::
::: {.column width="40%"}
![](images/seba_avatar_gmail.png){fig-align="center"}
[Thank you!]{style="text-align: center;"}
:::
:::

::: {style="text-align: center"}
[sebastiandres | https://sebastiandres.xyz]{style="font-size: 0.75em; color: gray"}
:::

:::{.notes}
So here's the survey - just scan the qr code or type the link, my nickname and my website, in case you're interested.
:::

---

## Recommended reading
::: columns
::: {.column width="70%"}
&#32;<br>

**Storytelling**

* Storyworthy, Matthew Dicks
* Made to Stick, Chip Heath and Dan Heath
:::
::: {.column width="30%"}
![](images/survey/QR_code_english.png){fig-align="center"}
[https://tinyurl.com/ycxj9ep5]{style="font-size: 0.75em; text-align: center;"}
:::
:::

:::{.notes}
So while some of you hopefully answer the survey, let me share some books.
My favorite book on storytelling is Storyworthy, by Matthew Dicks. It's a book packed with storytelling wisdom and some great stories. So fun to read.
:::

---

## Recommended reading
::: { .columns }
::: {.column width="70%"}
&#32;<br>

**Data Storytelling**

* Storytelling with Data, Cole Nussbaumer Knaflic
* Data Visualization & Storytelling, Jose Berengueres and Marybeth Sandell

:::
::: {.column width="30%"}
![](images/survey/QR_code_english.png){fig-align="center"}
[https://tinyurl.com/ycxj9ep5]{style="font-size: 0.75em; text-align: center;"}
:::
:::

:::{.notes}
My favorite book on data storytelling Storytelling with Data, by Cole Nussbaumer. It very well written, and it explains step by step why some visualizations work and others fail.
:::

---

## 
::: {.columns style="text-align: center"}
::: {.column width="10%"}
:::
::: {.column width="40%"}
![](images/survey/QR_code_english.png){fig-align="center"}
https://tinyurl.com/ycxj9ep5
:::
::: {.column width="40%"}
![](images/seba_avatar_gmail.png){fig-align="center"}
[¡Gracias!]{style="text-align: center;"}
:::
:::

::: {style="text-align: center"}
[sebastiandres | https://sebastiandres.xyz]{style="font-size: 0.75em; color: gray"}
:::

:::{.notes}
Thanks for coming to my talk, hopefully we have time for some questions.
:::