Data Visualization with Streamlit - Part II

Part one of Data Visualization with Streamlit.

Data visualizations not only need to display data, but also need a beautiful layout. Streamlit helps you quickly make a cool web app without knowing complicated HTML, CSS or other front-end technologies.

Widgets

We can use some widgets in the application to present an interface that directly interacts with the user.

1. Streamlit.text_input/Streamlit.number_input

Streamlit.text_input method displays a single-line text input box. The text_input method returns the current content of the text input box widget.

1
2
st.text_input("Your name", key = "name")
st.write("Welcome to you,", st.session_state.name)

The output is:

1
streamlit.number_input(label, min_value = None, max_value = None, value = <streamlit.DeltaGenerator.NoValue object>, step=None, format=None)

2. Streamlit.button

You can trigger some events by clicking the button and return the corresponding results. The button method returns a Boolean value indicating whether the button was clicked in the last application cycle.

1
streamlit.button(label, key = None, help = None, on_click = None, args = None, kwargs = None)

Example:

1
2
3
4
if st.button('Submit'):
  st.write('You have submitted!')
else:
  st.write('Please submit!')

The output is:

3. Streamlit.checkbox

Streamlit’s checkbox method displays a checkbox widget. The checkbox method returns a Boolean value indicating whether the checkbox is selected.

1
streamlit.checkbox(label, value = False, key = None, help = None, on_change = None, args = None, kwargs = None)

Example:

1
2
3
4
agree = st.checkbox('I agree')
disagree = st.checkbox('I disagree')
if agree:
  st.write('Great!')

The output is:

4. Streamlit.selectbox

Streamlit’s selectbox displays the selectbox widget. The selectbox method returns the selected option.

1
st.selectbox(label, options, index = 0, format_func = < class 'str' > , key = None)

Example:

1
2
3
4
skill_option = st.selectbox(
  'Which skill do you most want to learn?',
  ('Java', 'Python', 'C', 'PHP', 'C++', 'Javascript', 'HTML', 'Other'))
st.write('You selected:', skill_option)

The output is:

5. Streamlit.slider

The slider method of streamlit displays the slider widget. The slider method returns the current value of the slider widget.

1
streamlit.slider(label, min_value = None, max_value = None, value = None, step = None, format = None, key = None)

Example:

1
2
score = st.slider('What is your score?', 0.0, 100.0, (80.0))
st.write('Score:', score)

The output is:

Add widgets to sidebar

We have introduced several widgets which can add interactivity. We can also use st.sidebar.[element_name]` to put them in the sidebar. Every element passed to st.sidebar is fixed to the left, making the entire page clear.

Example:

1
add_selectbox = st.sidebar.selectbox("Which number do you like?", (10, 20, 30, 40))

The output is:

Additionally, you can use some other methods to lay out your app. Streamlit.columns() can lay out widgets side-by-side. Streamlit.form will create a form that batches elements together with a “Submit” button. Streamlit.expander can hide away large content, etc.

Example:

1
2
3
4
5
6
7
8
df = pd.DataFrame(np.random.randn(10, 3),
  columns = ('column %d' % col
    for col in range(3)))
column_left, column_right = st.beta_columns(2)
with column_left:
  st.line_chart(data = df)
with column_right:
  df

The output is:

Some of the methods in Streamlit are introduced above. For more details, please refer to the official website of Streamlit.

Caching

Caching is a mechanism provided by Streamlit to improve performance of the app. It makes your app execute more quickly, especially while loading large amounts of data from the web or manipulating large data sets. The caching mechanism can avoid doing such heavy operations frequently by caching the previous results. You can just simply use @st.cache decorator in the code to enable the caching mechanism.

1
2
3
4
5
@st.cache
def
function (argument):
# Do something low in here!
  return the_result

Through the above introduction we learned a little about all the individual pieces, now let’s review how it works together.

In short, Streamlit works as follows:

1. For every user interaction, the entire script is executed from beginning to end;

2. Streamlit assigns values to variables based on the state of UI components;

3. Cache allows Streamlit to avoid repeated requests for data or repeated calculations.

The basic operations of Streamlit have been introduced. In the next article, we will use the functions described above to make a visual dashboard about COVID-19.