Data Visualization using Streamlit – A Complete Guide

Data Visualization Using Streamlit Cover Image

Data visualisation is the representation of data in a graphical format. It helps us to understand the data better and in an easier way. Data visualisation can be performed with the help of visual elements like charts, graphs, maps, etc.

In this tutorial, we will learn how to plot different charts using Streamlit. So let us begin!

Also read: An Introduction to Streamlit


Line Chart in Streamlit

It is a graphical representation of information performed by connecting that connects a series of data points as a continuous line. It is one of the simplest forms of data visualization techniques.

import streamlit as st
import pandas as pd

st.header("Line Chart")

data = {"a":[23, 12, 78, 4, 54], "b":[0, 13 ,88, 1, 3], 
"c":[45, 2, 546, 67, 56]}

df = pd.DataFrame(data)
df
st.line_chart(data=df)

Output:

Streamlit Line Chart
Streamlit Line Chart

Here, we have taken some arbitrary data and created a data frame first using the Pandas library and then plotted the chart using the line_chart function. We have also displayed the data frame before plotting the graph for quick reference.

Also read: Calculator App using Streamlit – Easy Step-by-Step Method


Bar Chart in Streamlit

A bar chart represents data in the form of vertical or horizontal rectangular bars. The height of each bar is proportional to the value that it represents. Streamlit provide a bar_chart function to plot bar charts for data visualization.

import streamlit as st
import pandas as pd

st.header("Bar Chart")

data = {"a":[23, 12, 78, 4, 54], "b":[0, 13 ,88, 1, 3], 
"c":[45, 2, 546, 67, 56]}

df = pd.DataFrame(data)
df
st.bar_chart(data=df)

Output:

Streamlit Bar Chart
Streamlit Bar Chart

Since the data frame contains 5 rows, there are bars corresponding to each row in the output. These bars contain the distribution of each column’s value in that specific row and are denoted by different colours for each column.

Also read: Deploying a Machine Learning Model using Streamlit – House Price Prediction GUI


Area Chart in Streamlit

An area chart is a combination of both a line chart and a bar chart. The data points are plotted and then connected by lines. Then, the area below the line is coloured. Similarly, the other values are also plotted and the area is then coloured resulting in a layered chart. We can plot such a chart using the area_chart function from Streamlit.

import streamlit as st
import pandas as pd

st.header("Area Chart")

data = {"a":[23, 12, 78, 4, 54], "b":[0, 13 ,88, 51, 3], 
"c":[45, 2, 46, 67, 56]}

df = pd.DataFrame(data)
df
st.area_chart(df)

Output:

Streamlit Area Chart
Streamlit Area Chart

Here the area of each column in the data frame is represented by a different colour as can be seen in the figure above. Some of the areas overlap as well depending on the data provided.

Also read: Theming in Streamlit – 2 Methods to Customize The Look and Feel of Streamlit apps


Maps in Streamlit

We can also display maps in a Streamlit web app as a part of data visualization. The map function in Streamlit helps you display a map with data points on it. We can specify the data using the column names “lat” or “latitude” to denote the latitude and “lon” or “longitude” to denote the longitude. It is necessary to add these columns in the data to be plotted to plot the map.

import streamlit as st
import pandas as pd

st.header("Map")

data = {"lat":[28.704060, 28.459497, 13.082680, 17.385044, 23.0225],
        "lon":[77.102493, 77.026634, 80.270721, 78.486671, 72.5714],
        "City": ["Delhi", "Gurgaon", "Chennai", "Hyderabad", "Ahemdabad"]}

df = pd.DataFrame(data)
df
st.map(data=df)

Output:

Streamlit Map Data
Streamlit Map Data
Streamlit Map
Streamlit Map

The data in this example contains locations of some cities in India as displayed in the figure above. The map denotes these specified cities by a red dot. Here, the maps can be zoomed in and out as well when we run the Streamlit app.

Note that Streamlit allows us to save these charts as ‘SVG’ or ‘PNG’ and edit them using the Vega editor. Also, all the visual elements can be zoomed in and out as well.


Conclusion

That’s all! We have learnt how to perform data visualization using Python and Streamlit. Another way of data visualization using Streamlit is to use Python libraries like Matplotlib, Plotly, Bokeh, etc. You can check out our tutorials on the same for learning about them.


Reference