{"id":36905,"date":"2022-11-19T09:41:29","date_gmt":"2022-11-19T09:41:29","guid":{"rendered":"https:\/\/www.askpython.com\/?p=36905"},"modified":"2022-11-19T09:41:30","modified_gmt":"2022-11-19T09:41:30","slug":"data-visualization-using-streamlit","status":"publish","type":"post","link":"https:\/\/www.askpython.com\/python-modules\/data-visualization-using-streamlit","title":{"rendered":"Data Visualization using Streamlit – A Complete Guide"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

In this tutorial, we will learn how to plot different charts using Streamlit. So let us begin!<\/p>\n\n\n\n

Also read: An Introduction to Streamlit<\/a><\/em><\/strong><\/p>\n\n\n\n

\n\n\n\n

Line Chart in Streamlit<\/h2>\n\n\n\n

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.<\/p>\n\n\n

\nimport streamlit as st\nimport pandas as pd\n\nst.header("Line Chart")\n\ndata = {"a":[23, 12, 78, 4, 54], "b":[0, 13 ,88, 1, 3], \n"c":[45, 2, 546, 67, 56]}\n\ndf = pd.DataFrame(data)\ndf\nst.line_chart(data=df)\n\n<\/pre><\/div>\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"Streamlit
Streamlit Line Chart<\/figcaption><\/figure>\n\n\n\n
Here, we have taken some arbitrary data and created a data frame first using the Pandas<\/a> library and then plotted the chart using the line_chart<\/code> function. We have also displayed the data frame before plotting the graph for quick reference.<\/p>\n\n\n\n
Also read: Calculator App using Streamlit \u2013 Easy Step-by-Step Method<\/a><\/em><\/strong><\/p>\n\n\n\n
\n\n\n\n
Bar Chart in Streamlit<\/h2>\n\n\n\n
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<\/code> function to plot bar charts for data visualization.<\/p>\n\n\n
\nimport streamlit as st\nimport pandas as pd\n\nst.header("Bar Chart")\n\ndata = {"a":[23, 12, 78, 4, 54], "b":[0, 13 ,88, 1, 3], \n"c":[45, 2, 546, 67, 56]}\n\ndf = pd.DataFrame(data)\ndf\nst.bar_chart(data=df)\n\n<\/pre><\/div>\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"Streamlit
Streamlit Bar Chart<\/figcaption><\/figure>\n\n\n\n
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. <\/p>\n\n\n\n
Also read: Deploying a Machine Learning Model using Streamlit \u2013 House Price Prediction GUI<\/a><\/em><\/strong><\/p>\n\n\n\n
\n\n\n\n
Area Chart in Streamlit<\/h2>\n\n\n\n
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<\/code> function from Streamlit.<\/p>\n\n\n
\nimport streamlit as st\nimport pandas as pd\n\nst.header("Area Chart")\n\ndata = {"a":[23, 12, 78, 4, 54], "b":[0, 13 ,88, 51, 3], \n"c":[45, 2, 46, 67, 56]}\n\ndf = pd.DataFrame(data)\ndf\nst.area_chart(df)\n\n<\/pre><\/div>\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"Streamlit
Streamlit Area Chart<\/figcaption><\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
Also read: Theming in Streamlit \u2013 2 Methods to Customize The Look and Feel of Streamlit apps<\/a><\/em><\/strong><\/p>\n\n\n\n
\n\n\n\n
Maps in Streamlit<\/h2>\n\n\n\n
We can also display maps in a Streamlit web app as a part of data visualization. The map<\/code> function in Streamlit helps you display a map with data points on it. We can specify the data using the column names “lat”<\/strong> or “latitude”<\/strong> to denote the latitude and “lon”<\/strong> or “longitude”<\/strong> to denote the longitude. It is necessary to add these columns in the data to be plotted to plot the map.<\/p>\n\n\n
\nimport streamlit as st\nimport pandas as pd\n\nst.header("Map")\n\ndata = {"lat":[28.704060, 28.459497, 13.082680, 17.385044, 23.0225],\n        "lon":[77.102493, 77.026634, 80.270721, 78.486671, 72.5714],\n        "City": ["Delhi", "Gurgaon", "Chennai", "Hyderabad", "Ahemdabad"]}\n\ndf = pd.DataFrame(data)\ndf\nst.map(data=df)\n\n<\/pre><\/div>\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"Streamlit
Streamlit Map Data<\/figcaption><\/figure>\n\n\n\n
\"Streamlit
Streamlit Map<\/figcaption><\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
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<\/a>, Plotly<\/a>, Bokeh<\/a>, etc. You can check out our tutorials on the same for learning about them.  <\/p>\n\n\n\n
\n\n\n\n
Reference<\/h2>\n\n\n\n