{"id":16200341,"url":"https://github.com/andfanilo/streamlit-techtalk-livedemo","last_synced_at":"2026-05-09T14:14:50.613Z","repository":{"id":47220692,"uuid":"257021620","full_name":"andfanilo/streamlit-techtalk-livedemo","owner":"andfanilo","description":"Streamlit livecode session for meetups/tech talks","archived":false,"fork":false,"pushed_at":"2021-09-08T02:07:14.000Z","size":697,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-13T19:52:08.844Z","etag":null,"topics":["altair","matplotlib","pandas","python","python3","streamlit"],"latest_commit_sha":null,"homepage":"https://docs.google.com/presentation/d/1yHEBu9ywr-E7GcpZEIOXqcEblcuZZAugm2mEf9gtI-U/edit?usp=sharing","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andfanilo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-19T14:33:45.000Z","updated_at":"2021-06-27T09:26:10.000Z","dependencies_parsed_at":"2022-08-27T23:53:12.306Z","dependency_job_id":null,"html_url":"https://github.com/andfanilo/streamlit-techtalk-livedemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-techtalk-livedemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-techtalk-livedemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-techtalk-livedemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-techtalk-livedemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andfanilo","download_url":"https://codeload.github.com/andfanilo/streamlit-techtalk-livedemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704516,"owners_count":20982292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["altair","matplotlib","pandas","python","python3","streamlit"],"created_at":"2024-10-10T09:29:57.418Z","updated_at":"2026-05-09T14:14:45.581Z","avatar_url":"https://github.com/andfanilo.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Streamlit Live Demo - Titanic analysis\n\n[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/andfanilo/streamlit-techtalk-livedemo/app_final.py)\n\n## Prerequisites\n\n```\nconda create -n streamlit python=3.7\nconda activate streamlit\npip install streamlit pandas altair matplotlib seaborn plotly bokeh scikit-learn\n```\n\n## Run\n\n```bash\nstreamlit run app.py\n```\n\n## Demo steps\n\n### Part 1 - First steps \n\n- Create empty `app.py`\n- Open terminal with `CTRL + SHIFT + ù`. Run `streamlit run app.py`\n- `st.write(\"Hello World\")`. Activate `Run on save`.\n  - I like livereload.\n  - Streamlit watches file and updates when change or save detected\n- `st.markdown(\":tada: Streamlit is **super** easy\")` \n  - Tip : markdown accepts HTML/CSS `st.markdown(\":tada: \u003cspan style='color:red;'\u003eStreamlit\u003c/span\u003e is **super** easy\", unsafe_allow_html=True)`\n- Pull an image of Titanic : `st.image(\"images/titanic.jpg\", width=300)`.\n- Now let's plot, first read Titanic in DF `df = pd.read_csv('data/titanic.csv')`.\n  - We can `st.dataframe(df)` to see our dataframe live.\n  - Tip : Style dataframe : `st.dataframe(df.style.applymap(lambda data: f\"background-color: {'red' if data==0 else 'green'}\", subset=['Survived']))`\n- Plot Matplotlib Age distribution (built server side as static image)\n\n```python\nimport matplotlib.pyplot as plt\n\nfig, ax = plt.subplots()\ndf.hist(\"Age\", ax=ax)\nst.pyplot(ax) # show that Streamlit shows error\nst.pyplot(fig)\n```\n\n- Describe Altair (binding Python to Vega to graph using JSON spec)\n\n- So to build chart, built client side not server side\n```python\nchart = alt.Chart(df).mark_bar().encode(x=\"Age\", y=\"count()\", color=\"Survived:N\", tooltip=['Age', \"count()\"]).interactive()\nst.altair_chart(chart)\nst.altair_chart(chart, use_container_width=True)\n```\n- If it's hard to remember, wrap with echo to see code `with st.echo(): chart = ...`\n\n```python\nwith st.echo():\n  chart = alt.Chart(df).mark_bar().encode(x=\"Age\", y=\"count()\", color=\"Survived\", tooltip=['Age', \"count()\"]).interactive()\n  st.altair_chart(chart, use_container_width=True)\n```\n\nTransition to interactive : now this is very static, what if I want to plot the distribution of another column ?\n\n- I don't remember exactly how `st.selectbox` works so `st.help(st.selectbox)`, works with any Python object.\n- extract `col = \"Age\"` and then `st.help(st.selectbox)` then `col = st.selectbox(\"...\", df.columns)`.\n- `col = st.selectbox(\"...\", df.columns, df.columns.values.tolist().index(\"Age\"))`\n  - select `Pclass`, then `Name`, I like `Name` :) .\n\n### Part 2 - Interactive widgets and layout\n\n- so widget state is stored inside object directly\n- I like file uploader, let's use it. `f = st.file_uploader(..)` f is directly file uploaded. \n  - `None` for now, `st.write(f)` to prove it\n- `if f is not None:` run the code. \n\n```python\nf = st.file_uploader(\"Select file\", type=[\"csv\"])\ndf = pd.read_csv(f)\n```\n\n- Then change csv files.\n- If you remember sidebar, put file_uploader in sidebar `f = st.sidebar.file_uploader(..)`.\n- Let's put expander to hide dataframe.\n```python\nwith st.beta_expander(\"Data preview\"):\n    st.dataframe(df.style.applymap(lambda data: f\"background-color: {'red' if data==0 else 'green'}\", subset=['Survived']))\n    st.image(\"images/titanic.jpg\", width=200)\n```\n- Columns\n```python\nwith st.beta_expander(\"Data preview\"):\n    c1, c2 = st.beta_columns(2)\n    c1.dataframe(df.style.applymap(lambda data: f\"background-color: {'red' if data==0 else 'green'}\", subset=['Survived']))\n    c2.image(\"images/titanic.jpg\", width=200)\n```\n\n### Part 3 - Caching\n\n- First let's refactor a bit to put loading data in a function `def load_data(f): return pd.read_csv(f)`.\n  - say Streamlit displays your errors on screen, not in logs, when `pd.read_csv(None)`\n- Add `st.warning(\"CACHE MISS\")` in this function.\n- Add `@st.cache`. Copy paste the suppress warning `@st.cache(allow_output_mutation=True, suppress_st_warning=True)`. \n- Upload different files again.\n\n### Part 4 - Button for ML\n\n- Import utils : `from utils import *`. Replace `load_data`.\n```python\nst.subheader(\"Classification\")\nwith st.form(key=\"classify\"):\n    c1, c2 = st.beta_columns(2)\n    n_estimators = c1.number_input(\"Choose number of trees:\", 1, 1000, 100)\n    max_depth = c2.number_input(\"Max depth:\", 1, 100, 5)\n    button_pressed = st.form_submit_button(label=\"Train model\")\n\nif button_pressed:\n    with st.spinner(\"Training en cours\"):\n        clf, confusion_matrix, importance_plot, force_plot = train_rf(df, n_estimators, max_depth)\n        st.balloons()\n        st.pyplot(confusion_matrix)\n        st.pyplot(importance_plot)\n        st_shap(force_plot, 400)\n```\n- Check Age to Age Effects, Age to Pclass effects\n\n## Resources\n\n- https://pmbaumgartner.github.io/streamlitopedia/ https://github.com/pmbaumgartner/dank-data-explorer https://dank-data-explorer.herokuapp.com/\n- https://datasetsformlapp.herokuapp.com/ https://www.youtube.com/watch?v=SIu2VL-RAXc\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandfanilo%2Fstreamlit-techtalk-livedemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandfanilo%2Fstreamlit-techtalk-livedemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandfanilo%2Fstreamlit-techtalk-livedemo/lists"}