Visualize data with Streamlit

Overview

――I want to create a web application that can visualize data interactively ――It's a little heavy to use D3.js etc. live (technically) ――In the first place, knowledge of Web system is almost 0 without humility (Vue? React? What is it delicious?) --Then, let's use Streamlit

Environment

Let's read Official Document without reading such an article.

Installation

Install with pip.

$ pip install streamlit

Operation check

$ streamlit hello

This will set up a web server locally on port 8063 (default setting). So, you can check the sample page by accessing http: // localhost: 8063 / with your browser.

By the way, if you want to launch a web application with a python file that imports streamlit, specify the python file after run as shown below.

$ streamlit run [python-file]

Basic format

The official documentation is extensive, so it's quick to refer to it.

Only the atmosphere here.

text

Headings can be specified with streamlit.header or subheader. Sentences can be written in streamlit.text or streamlit.write. You can also use Markdown (streamlit.markdown).

For example

st.title('Sample page')
st.markdown('''
Contents of chocolate ball

-Peanuts
  - 28g
''')

Data frame (table)

You can draw a table using pandas.DataFrame. Use streamlit.table or streamlit.dataframe. st.dataframe is highly functional, such as being able to highlight and sort cells under specific conditions.

For example

def rand_df(r=10, c=5):
    df = pd.DataFrame(
        np.random.randn(r, c),
        columns=('col %d' % i for i in range(c)))
    return df
dataframe = rand_df(c=3, r=2)
st.dataframe(dataframe)

Graph

There are two ways to draw charts, one is to draw a chart with streamlit and the other is to draw a figure object of matplotlib.

For example

dataframe = ...
st.line_chart(dataframe)

By default, a line graph for each column is drawn. You can also zoom in/out by operating the mouse wheel, and move the position by dragging. (Interactive!)

Also, if you are familiar with matplotlib, you can also draw figure objects with streamlit.pyplot. Of course, you can also use seaborn.

fig = plt.Figure(figsize=(6,2))
ax = fig.subplots(1,1)
dataframe.plot(ax=ax)
st.pyplot(fig)

However, with this, it is not possible to enlarge/reduce (naturally). Besides, you can draw the chart of bokeh, and since it is supported in various ways, the official document is omitted below.

Widget Various widgets are available that allow you to select data.

For example

lst_flavors = ['Peanuts', 'Strawberry']
select_taste = st.selectbox('Flavor', lst_flavors)

Select items will appear in the pull-down menu. Check the Documentation as various items are available.

Side bar

If you specify st.sidebar.xxx, the sidebar will appear on the far left. The above command can be used as it is for xxx.

For example

st.sidebar.header('Side bar')
p = st.sidebar.slider('Probability setting', min_value=0.0, max_value=1.0, value=0.8)
st.sidebar.write(f'The set value is{p}is')

Like this.

cache

streamlit will re-execute all python files in order from the top when there is a change in the element with Widget etc. Therefore, even if it is not related to the changed element, the process will be executed every time you do a little heavy calculation.

Therefore, I would like to use the cache if there is no change in the related elements. streamlit uses the @ st.cache decorator.

For example

@st.cache
def rand_df(r=10, c=5):
    df = pd.DataFrame(
        np.random.randn(r, c),
        columns=('col %d' % i for i in range(c)))
    return df
dataframe = rand_df(c=7)

This way, dataframe will not be updated even if there is a change in the widget etc.

Sample source code

Let's create just a sample web application using the example described above as it is. e.g. sample.py

import numpy as np
import pandas as pd
import streamlit as st
import matplotlib.pyplot as plt

#Drawing text
st.title('Sample page')
st.header('Header')
st.markdown('''
Contents of chocolate ball

-Peanuts
  - 28g
-Strawberry
  - 25g
''')

@st.cache
def rand_df(r=10, c=5):
    df = pd.DataFrame(
        np.random.randn(r, c),
        columns=('col %d' % i for i in range(c)))
    return df
dataframe = rand_df(c=3, r=10)

#Table drawing
st.dataframe(dataframe.head(n=3))
#Chart drawing
st.line_chart(dataframe)
# widget
lst_flavors = ['Peanuts', 'Strawberry']
select_taste = st.selectbox('Flavor', lst_flavors)
# Sidebar
st.sidebar.header('Side bar')
p = st.sidebar.slider('Probability setting', min_value=0.0, max_value=1.0, value=0.8)
st.sidebar.write(f'The set value is{p}is')

Set up a test server locally and check it with a browser.

streamlit run src/sample2.py

Now you can create an app like this

スクリーンショット 2021-01-19 1.05.51.png

The end

reference

Recommended Posts

Visualize data with Streamlit
Data analysis with python 2
Visualize corona infection data in Tokyo with matplotlib
Quickly visualize with Pandas
Visualize Yu-Gi-Oh! Card data with Python-Yu-Gi-Oh! Data Science 1. EDA
Reading data with TensorFlow
Visualize claims with AI
Visualize 2019 nem with WordCloud
Interactively visualize data with TreasureData, Pandas and Jupyter.
Folium: Visualize data on a map with Python
Data visualization with pandas
Data manipulation with Pandas!
Shuffle data with pandas
Data Augmentation with openCV
Normarize data with Scipy
Data analysis with Python
LOAD DATA with PyMysql
Visualize railway line data as a graph with Cytoscape 2
Challenge image classification with TensorFlow2 + Keras 3 ~ Visualize MNIST data ~
Carry over data to another page (tab) with streamlit
Embed audio data with Jupyter
Graph Excel data with matplotlib (1)
Artificial data generation with numpy
Extract Twitter data with CSV
Get Youtube data with python
Visualize 2ch threads with WordCloud-Scraping-
Clustering ID-POS data with LDA
Learn new data with PaintsChainer
Binarize photo data with OpenCV
Graph Excel data with matplotlib (2)
Visualize location information with Basemap
Save tweet data with Django
Create patent map with Streamlit
Visualize Wikidata knowledge with Neo4j
Data processing tips with Pandas
Interpolate 2D data with scipy.interpolate.griddata
Read json data with python
[R] Visualize long-term financial data of US companies with Shiny dashboard
How to deal with imbalanced data
How to deal with imbalanced data
[Python] Get economic data with DataReader
Versatile data plotting with pandas + matplotlib
Python data structures learned with chemoinformatics
Visualize python package dependencies with graphviz
Install the data files with setup.py
Parse pcap data with tshark command
Create noise-filled audio data with SoX
How to Data Augmentation with PyTorch
Overlay and visualize Geo data and statistical data
Easy data visualization with Python seaborn.
Generate fake table data with GAN
Process Pubmed .xml data with python
Data analysis starting with python (data visualization 1)
Manage your data with AWS RDS
Try data parallelism with Distributed TensorFlow
Data science environment construction with Docker
Data analysis starting with python (data visualization 2)
Merge JSON format data with Ansible
Implement "Data Visualization Design # 2" with matplotlib
Python application: Data cleansing # 2: Data cleansing with DataFrame
Subtitle data created with Amazon Transcribe