add new first and last episodes

Author: jenna-jordan

_episodes/.gitkeep

@@ -0,0 +1,68 @@
+---
+title: "Why make interactive visualizations?"
+teaching: 10
+exercises: 0
+questions:
+- "Why are visual representations of data useful when trying to see patterns?"
+- "Why do we want to make visualizations interactive?"
+- "Consider the message you want to convey or story you want to tell. Is it clearer with some interactivity?"
+objectives:
+- "To understand the difference between static and interactive plots"
+- "To understand why we may want to make plots interactive"
+- "To introduce what we will be doing in this workshop lesson"
+keypoints:
+- "Visualization is an important part of both exploratory data analysis and communicating results"
+- "Interactivity allows us to visualize more information without overcomplicating a single plot"
+---
+
+## Why do we like visualizations?
+
+Visualization is often one of the first and most vital steps of exploratory data analysis. 
+People benefit from visual representation of data to see patterns, and plotting data is also an important part of a researcher's communication toolbox.
+Interactive visualizations can be used both during the initial exploratory phase and the final publication and communication phase of a research project.
+
+> ## Discuss: visualizations in research publications
+>
+> When was the last time you saw a research paper without figures?
+>
+> When reading research do you start with the figures?
+>
+> How would the recent publications you have studied have made sense if you couldn't see the figures?
+{: .discussion}
+
+## Choices in analysis and presentation
+
+Producing a figure will often depend on the story you want to tell, or the pattern you wish to highlight in your data.
+
+Any one visualization is limited in how many attributes can (and should) be represented. For example, if you have a scatterplot and assign one attribute to x-axis, one attribute to the y-axis (maybe even one to the z-axis!), another attribute to the color, yet another attribute to the shape, and even another attribute to the size... you may be able to cram a lot of information into the plot, but the resulting visualization will probably not tell a clear story.
+
+Any one visualization is limited in how many different attributes can be reasonably included. Modern data sets are often too dense to visualize without making a lot of these choices.
+
+But with an interactive plot, we can include all of this information - just not at the same time. Rather than being forced to choose which few attributes to represent and communicate, you can allow the audience to choose the information they are interested in seeing, with the possibility they will choose to explore all of the possible visualizations.
+
+The magic of interactivity is that you don't have to limit yourself and your plots - you can visualize it all! However, you should carefully consider the options for your interactive visualizations so that they are still telling a cohesive story about the data.
+
+Interactivity gives the audience a chance to explore the data in ways a static (non-interactive) plot does not.  It can also help you and your collaborators understand your data better.
+
+> ## There are many options for making figures with Python
+>
+> This tutorial makes use of Plotly and Streamlit, but a range of options now exist for visualizing data in the Python ecosystem.
+>
+> These are summarized at [PyViz.org](https://pyviz.org/tools.html).
+>
+> Many of the tools described are developed with specific users in mind, whereas others are intentionally more basic and adaptable. Some are focused on particular issues, such as choices of color or the aggregation of data. There is a lot here to explore!
+{: .callout}
+
+## How will we build our interactive visualization app?
+
+1. Create a new and squeaky clean python environment that has only the packages we need
+2. Use pandas to wrangle our data into a tidy format
+3. Create some initial visualizations and learn how to use Plotly Express
+4. Create a basic streamlit app (no interactivity yet!) with one of those initial visualizations
+5. Go back through our code to refactor (reorganize) some hardcoded information into more flexible variables
+6. Add widgets! These are what allow our app to be truly interactive and allow users to adjust the displayed plots
+7. Deploy the app - so everyone can see what you created.
+8. (Optionally) Put your own creative spin on it - add some of your own widgets and visualizations to make your app unique
+
+
+{% include links.md %}

_episodes/00-the-why-of-interactivity.md

@@ -1,6 +1,6 @@
 ---
 title: "Create a New Environment"
-teaching: 10
+teaching: 20
 exercises: 0
 questions:
 - "How can I create a new conda environment?"

_episodes/01-why-interactivity.md

@@ -0,0 +1,119 @@
+---
+title: "Publish Your Streamlit App"
+teaching: 20
+exercises: 0
+questions:
+- "How do I deploy my app so other people can see it?"
+- "How do I create a `requirements.txt` file?"
+objectives:
+- "Learn how to deploy a Streamlit app"
+keypoints:
+- "All Streamlit apps must have a GitHub repo with the code, data, and environment files"
+- "You can deploy up to 3 apps for free with Streamlit Cloud"
+---
+
+Now that we have our final app, it's time to publish (a.k.a deploy) it so that other people can see and interact with the visualizations.
+
+## Create a GitHub repo
+
+The first step is to create a new GitHub repository that will contain the code, data, and environment files.
+
+> ## Refresher on creating GitHub repos
+> If you have not created a GitHub repository before or need a refresher, please refer to [this episode on Remotes in GitHub](https://swcarpentry.github.io/git-novice/07-github/index.html) from the Software Carpentries lesson [Version Control with Git](https://swcarpentry.github.io/git-novice/)
+{: .callout}
+
+Give your repo a descriptive name, like `interact-with-gapminder-data-app`. Make sure that the repo is "Public" (not Private) and check the box to initialize the repo with a README.md.
+
+Once your repo is created, clone a copy of it to your local computer. You can use the application GitHub Desktop to more easily accomplish this. You can download GitHub Desktop [here](https://desktop.github.com).
+
+Now that you have a copy of your repo on your computer, you can copy over your code and data files.
+
+## Copy over the code and data files
+
+During this workshop, we have created some Jupyter Notebooks files and an `app.py` file. We don't need the Jupyter Notebooks to be a part of the app's repo, only the `app.py` file.
+
+Remember that at the start of the `app.py` file, we import our data with the line:
+
+~~~
+df = pd.read_csv("Data/gapminder_tidy.csv")
+~~~
+{: .language-python}
+
+So, we also need to make sure to include the `Data` folder and the `gapminder_tidy.csv` file inside of it.
+
+You can copy these files using a GUI (Finder on Macs or Explorer on PCs) or the command line, whatever you are comfortable with.
+
+Let's suppose that your repo is named `interact-with-gapminder-data-app`, and it has been cloned to the `GitHub` folder in your `Documents`. So, the location of your local repo is `~/Documents/GitHub/interact-with-gapminder-data-app`. So far, we have been working from the `Desktop`, in a folder called `data_viz_workshop`. Using the command line, we can copy the relevant files with:
+
+~~~
+cp ~/Desktop/data_viz_workshop/app.py ~/Documents/GitHub/interact-with-gapminder-data-app/app.py
+mkdir ~/Documents/GitHub/interact-with-gapminder-data-app/Data
+cp ~/Desktop/data_viz_workshop/Data/gapminder_tidy.csv ~/Documents/GitHub/interact-with-gapminder-data-app/Data/gapminder_tidy.csv
+~~~
+{: .language-bash}
+
+Your interact-with-gapminder-data-app folder should now look like:
+
+~~~
+interact-with-gapminder-data-app
+│   README.md
+│   app.py    
+│
+└───Data
+    │   gapminder_tidy.csv
+~~~
+{: .output}
+
+We're almost done! But we need to do one more thing... specify an environment for the app to run in.
+
+## Add a requirements.txt file
+
+In order for our app to run on Streamlit's servers, we need to tell it what the environment should look like - or what packages need to be installed. While there are many standards for describing a python environment (such as the `environment.yml` file we used to create our conda environment at the beginning of this workshop), Streamlit tends to work best with a `requirements.txt` file.
+
+The `requirements.txt` file is just a list of package names and version numbers, with each line looking like `packagename==version.number.here`. And there is no need to list out all of the packages, just the top-level ones. The dependencies will get installed for each listed package as well.
+
+The `requirements.txt` file should be kept in the root of your repository. So, after creating a requirements file your repo should look like:
+
+~~~
+interact-with-gapminder-data-app
+│   README.md
+│   requirements.txt    
+│   app.py    
+│
+└───Data
+    │   gapminder_tidy.csv
+~~~
+{: .output}
+
+For our app, we only need to specify two packages: Streamlit and Plotly. Note that you may have different version numbers. Here is an example of our `requirements.txt` file:
+
+~~~
+streamlit==1.1.0
+plotly==5.1.0
+~~~
+{: .source}
+
+## Push the updated repo
+
+Now that we have our code, data, and environment files added to our local copy of the repository, it's time to push our repo to GitHub. You can use GitHub Desktop or use git from the command line to accomplish this. If you have unwanted extra files (like `.DS_Store`) added to the directory, make sure to add them to a `.gitignore` file!
+
+Once you have added, committed, and pushed your changes (with a descriptive commit message!) go to your GitHub repo online to double check that it is up to date.
+
+Now we are ready to deploy the app!
+
+## Sign up for Streamlit Cloud (Community Tier)
+
+Follow the steps detailed on Streamlit's Documentation to sign up for a free Streamlit Cloud account and connect it to your GitHub account. The documentation is located [here](https://docs.streamlit.io/streamlit-cloud/get-started).
+
+You can sign up for a Streamlit Cloud account at [share.streamlit.io/](https://share.streamlit.io/).
+
+On the free Community tier, you can deploy up to 3 apps at once. If you later decide to build more Streamlit apps, you can remove this one.
+
+## Deploy your app
+
+When you have signed in to your Streamlit account, click "New app". Copy and paste your GitHub repo URL, for example `https://github.com/username/interact-with-gapminder-data-app`, specify the correct branch name (which is most likely `main`), and specify the filename of your app (`app.py`). Then click "Deploy", and wait for the balloons!
+
+You can read the documentation about this process for deploying an app [here](https://docs.streamlit.io/streamlit-cloud/get-started/deploy-an-app).
+
+{% include links.md %}
+