Streamlit Part 5: Mastering Data Visualization and Chart Types

In today's fast-paced world of data science, effectively visualizing data is crucial. Whether you're an experienced data analyst or just starting your journey, mastering various visualization techniques can greatly enhance your ability to communicate insights and drive decision-making. This comprehensive guide explores Streamlit, a popular Python library for creating interactive web applications, and introduces 12 powerful chart types you can easily create to visualize your data. From simple bar charts to advanced geospatial visualizations, this tutorial covers it all.

---

Introduction to Streamlit and Its Visualization Capabilities

Streamlit has revolutionized the way data scientists and developers create interactive web applications for data visualization. With its intuitive API and seamless integration with popular Python libraries, Streamlit allows you to transform your data scripts into sharable web apps in minutes. In this guide, we'll focus on Streamlit's versatility in creating various chart types, each tailored to different data visualization needs.

---

1. Area Chart

Introduction to Area Charts

Area charts are excellent for displaying cumulative totals over time or across categories. They emphasize the magnitude of change and the relationship between different datasets, making them perfect for tracking trends and comparing multiple data series.

Creating the Area Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 1. Area Chart")

# Generate random data for the area chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["col1", "col2", "col3"],
)

# Create an area chart using the random data
st.area_chart(
    chart_data,
    x="col1",
    y=["col2", "col3"],
    color=["#FF0000", "#0000FF"],
)

Use Cases

• Sales Growth: Visualize how sales increase over different quarters.
• Website Traffic: Track the number of visitors over time.
• Cumulative Metrics: Display cumulative metrics like total revenue or expenses.

Customization Tips

• Adjust Colors: Modify the color parameter to match your brand or preferences.
• Add Titles and Labels: Enhance clarity by adding titles and axis labels.
• Modify Axes: Adjust the scale or range of the axes for better data representation.

---

2. Bar Chart

Introduction to Bar Charts

Bar charts are a fundamental way to compare different categories or groups. They are highly effective in displaying discrete data points, making it easy to compare quantities across various categories.

Creating the Bar Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 2. Bar Chart")

# Generate random data for the bar chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["col1", "col2", "col3"],
)

# Display a bar chart using the same data
st.bar_chart(chart_data)

Use Cases

• Sales by Region: Compare sales figures across different regions.
• Product Popularity: Display the popularity of various products.
• Survey Results: Visualize responses to survey questions.

Customization Options

• Bar Colors: Although the example uses default settings, you can customize bar colors using additional parameters or by preprocessing the data.
• Orientation: Change the orientation of the bars (horizontal or vertical) for better readability.
• Labels and Legends: Add labels and legends to provide more context to the data.

---

3. Line Chart

Introduction to Line Charts

Line charts are excellent for showing trends over continuous data, such as time series. They help in tracking changes, identifying patterns, and comparing multiple data series over the same interval.

Creating the Line Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 3. Line Chart")

# Generate random data for the line chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["col1", "col2", "col3"],
)

# Create a line chart with the random data
st.line_chart(
    chart_data,
    x="col1",
    y="col2",
    color="col3",
)

st.write("#### 3.1 Basic Line Chart")

Use Cases

• Stock Prices: Track stock price movements over time.
• Temperature Changes: Monitor temperature fluctuations across different days.
• Website Visits: Analyze website traffic trends over weeks or months.

Customization Tips

• Multiple Lines: Plot multiple lines by specifying additional columns in the y parameter.
• Line Styles: Adjust line styles (solid, dashed) to differentiate between data series.
• Interactivity: Enhance interactivity by adding tooltips or hover effects to display exact values.

---

4. Map

Introduction to Maps in Streamlit

Geographical data visualization is crucial for spatial analysis, allowing you to visualize data points on a map to identify patterns, hotspots, and distributions across different locations.

Creating the Map

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 4. Map")

# Create a DataFrame with random latitude and longitude data
df = pd.DataFrame(
    {
        "col1": np.random.randn(1000) / 50 + 37.76,  # Latitude values around 37.76
        "col2": np.random.randn(1000) / 50 + -122.4,  # Longitude values around -122.4
        "col3": np.random.randn(1000) * 100,  # Random size values
        "col4": np.random.rand(1000, 4).tolist(),  # Random color values
    }
)

# Display the data on a map
st.map(
    df,
    latitude="col1",
    longitude="col2",
    size="col3",
    color="col4",
)

Use Cases

• Store Locations: Display the locations of multiple stores or offices.
• Event Hotspots: Visualize areas with high concentrations of events or activities.
• Demographic Distributions: Show the distribution of different demographic groups across regions.

Customization Tips

• Map Center and Zoom: Adjust the map's center and zoom level to focus on specific areas.
• Marker Aesthetics: Customize marker shapes, sizes, and colors to represent different data dimensions.
• Interactivity: Add tooltips or pop-ups to provide more information about each data point.

---

5. Scatter Chart

Introduction to Scatter Charts

Scatter charts are powerful tools for identifying relationships or correlations between two variables. They help in uncovering patterns, trends, and potential causations within your data.

Creating the Scatter Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 5. Scatter Chart")

# Generate random data for the scatter chart
scatter_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["a", "b", "c"],
)

# Create a scatter chart with the random data
st.scatter_chart(scatter_data)

Use Cases

• Advertising vs. Sales: Explore the relationship between advertising spend and sales figures.
• Height vs. Weight: Analyze the correlation between individuals' heights and weights.
• Performance Metrics: Compare different performance metrics of products or services.

Customization Tips

• Trend Lines: Add trend lines to highlight correlations or trends within the data.
• Point Sizes and Colors: Differentiate data points by adjusting their sizes and colors based on additional variables.
• Interactivity: Enhance interactivity by enabling tooltips that display detailed information when hovering over points.

---

6. Altair Chart

Introduction to Altair

Altair is a declarative statistical visualization library for Python, offering advanced charting capabilities with a simple and intuitive syntax. It excels in creating interactive and complex visualizations with minimal code.

Creating the Altair Chart

import numpy as np
import pandas as pd
import streamlit as st
import altair as alt  # Import Altair for advanced charting

st.write("### 6. Altair Chart")

# Generate random data for the Altair chart
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

# Create an Altair chart with interactive tooltips
c = (
    alt.Chart(chart_data)
    .mark_circle()
    .encode(
        x="a",
        y="b",
        size="c",
        color="c",
        tooltip=["a", "b", "c"],
    )
)

# Display the Altair chart in the Streamlit app
st.altair_chart(c, use_container_width=True)

Use Cases

• Exploratory Data Analysis: Investigate relationships between multiple variables.
• Interactive Dashboards: Create dynamic visualizations that respond to user inputs.
• Detailed Statistical Visualizations: Present complex data in an understandable format.

Customization Tips

• Faceting: Create small multiples to compare different subsets of data.
• Mark Types: Experiment with different mark types like lines, bars, or areas for varied visual effects.
• Interactive Elements: Incorporate selections, filters, and zooming to enhance user interactivity.

---

8. Graphviz Chart

Introduction to Graphviz

Graphviz is a tool for creating graph and network diagrams, making it invaluable for visualizing relationships, workflows, and organizational structures. It allows you to represent complex connections in a clear and organized manner.

Creating the Graphviz Chart

import streamlit as st
import graphviz  # Import Graphviz for creating graph diagrams

st.write("### 8. Graphviz Chart")

# Create a Graphviz directed graph
graph = graphviz.Digraph()

graph.edge("Planning", "Development")
graph.edge("Development", "Testing")
graph.edge("Testing", "Deployment")
graph.edge("Requirements Gathering", "Planning")
graph.edge("Design", "Planning")
graph.edge("Coding", "Development")
graph.edge("Code Review", "Development")
graph.edge("Unit Testing", "Testing")
graph.edge("Integration Testing", "Testing")
graph.edge("Staging", "Deployment")
graph.edge("Production", "Deployment")

# Display the graph in the Streamlit app
st.graphviz_chart(graph)

Use Cases

• Software Development Pipelines: Visualize the stages of software development from planning to deployment.
• Organizational Structures: Represent the hierarchy and relationships within an organization.
• Decision Trees: Illustrate the flow of decisions and possible outcomes.

Customization Tips

• Node Shapes and Colors: Customize node shapes and colors to represent different types of entities or statuses.
• Edge Styles: Modify edge styles (dashed, bold) to indicate different types of relationships or dependencies.
• Graph Layouts: Explore different graph layouts (e.g., hierarchical, circular) for better clarity.

---

9. Plotly Chart

Introduction to Plotly

Plotly is a powerful library for creating interactive and publication-quality graphs. It offers a wide range of chart types and customization options, making it suitable for complex data visualizations and interactive dashboards.

Creating Distribution Plots

import numpy as np
import streamlit as st
import plotly.figure_factory as ff  # Import Plotly's figure factory
import plotly.express as px  # Import Plotly Express for easy plotting

st.write("### 9. Plotly Chart")

# Generate random data for histograms
x1 = np.random.randn(200) - 2  # Dataset 1
x2 = np.random.randn(200)  # Dataset 2
x3 = np.random.randn(200) + 2  # Dataset 3

# Group the data together
hist_data = [x1, x2, x3]
group_labels = ["Group 1", "Group 2", "Group 3"]  # Labels for each dataset

# Create a distribution plot with custom bin sizes
fig = ff.create_distplot(
    hist_data,
    group_labels,
    bin_size=[0.1, 0.25, 0.5],  # Custom bin sizes for each dataset
)

# Display the distribution plot in the Streamlit app
st.plotly_chart(fig, use_container_width=True)

Creating Scatter Plots with Plotly Express

# Load the Gapminder dataset
df = px.data.gapminder()

# Create a scatter plot for the year 2007
fig = px.scatter(
    df.query("year==2007"),
    x="gdpPercap",  # GDP per capita on the x-axis
    y="lifeExp",  # Life expectancy on the y-axis
    size="pop",  # Size of markers based on population
    color="continent",  # Color markers by continent
    hover_name="country",  # Show country name when hovering
    log_x=True,  # Use a logarithmic scale for the x-axis
    size_max=60,  # Maximum size of markers
)

# Create tabs to compare different themes
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Plotly native theme"])
with tab1:
    # Display the chart using the Streamlit theme
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:
    # Display the chart using Plotly's native theme
    st.plotly_chart(fig, theme=None, use_container_width=True)

# Additional Plotly Chart with Custom Colorscale
st.subheader("Define a custom colorscale")

# Load the Iris dataset
df = px.data.iris()

# Create a scatter plot with a custom colorscale
fig = px.scatter(
    df,
    x="sepal_width",
    y="sepal_length",
    color="sepal_length",
    color_continuous_scale="reds",  # Use the 'reds' colorscale
)

# Create tabs to compare different themes
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Plotly native theme"])
with tab1:
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:
    st.plotly_chart(fig, theme=None, use_container_width=True)

Use Cases

• Distribution Analysis: Compare the distributions of different datasets side by side.
• Interactive Dashboards: Create dynamic and interactive visualizations that respond to user inputs.
• Comparative Analysis: Use multiple themes and styles to highlight different aspects of the data.

Customization Tips

• Theme Adjustments: Explore different themes to match your application's design.
• Layout Configurations: Adjust layout settings like margins, legends, and axis titles for better presentation.
• Advanced Chart Types: Experiment with 3D plots, heatmaps, and other advanced chart types for more complex visualizations.

---

10. pydeck Chart

Introduction to pydeck

pydeck is a Python interface for deck.gl, enabling advanced, high-performance WebGL-powered visualizations. It is particularly useful for creating intricate and interactive geospatial visualizations.

Creating the pydeck Chart

import numpy as np
import pandas as pd
import streamlit as st
import pydeck as pdk  # Import pydeck for advanced mapping

st.write("### 10. pydeck Chart")

# Generate random latitude and longitude data around a central point
chart_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=["lat", "lon"],
)

# Define the initial view state and layers for the map
st.pydeck_chart(
    pdk.Deck(
        map_style=None,  # Use default map style
        initial_view_state=pdk.ViewState(
            latitude=37.76,
            longitude=-122.4,
            zoom=11,
            pitch=50,
        ),
        layers=[
            # Add a hexagon layer to visualize density
            pdk.Layer(
                "HexagonLayer",
                data=chart_data,
                get_position="[lon, lat]",
                radius=200,
                elevation_scale=4,
                elevation_range=[0, 1000],
                pickable=True,
                extruded=True,
            ),
            # Add a scatterplot layer on top
            pdk.Layer(
                "ScatterplotLayer",
                data=chart_data,
                get_position="[lon, lat]",
                get_color="[200, 30, 0, 160]",
                get_radius=200,
            ),
        ],
    )
)

Use Cases

• Geospatial Analysis: Visualize large geospatial datasets to identify patterns and hotspots.
• Urban Planning: Analyze population density, traffic flow, or infrastructure distribution.
• Environmental Studies: Map environmental data like pollution levels or wildlife sightings.

Customization Tips

• Different Layer Types: Experiment with various layer types like ScatterplotLayer, ArcLayer, or PathLayer for diverse visual effects.
• Map Styles: Change the map_style parameter to use different map themes (e.g., satellite, dark mode).
• Interactivity: Enhance interactivity by enabling tooltips, filters, and dynamic data updates.

---

11. pyplot Chart

Introduction to Matplotlib's pyplot

Matplotlib is a foundational plotting library in Python, and pyplot provides a MATLAB-like interface for creating static, animated, and interactive visualizations. It is highly customizable and widely used for statistical data analysis and educational purposes.

Creating the Histogram

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

st.write("### 11. pyplot Chart")

# Generate random data from a normal distribution
arr = np.random.normal(1, 1, size=100)

# Create a histogram of the data
fig, ax = plt.subplots()
ax.hist(arr, bins=20)  # 20 bins in the histogram

# Display the histogram in the Streamlit app
st.pyplot(fig)

Use Cases

• Statistical Analysis: Visualize the distribution of datasets to identify patterns and anomalies.
• Educational Purposes: Teach concepts like probability distributions and data normalization.
• Data Exploration: Assess the shape and spread of data before performing further analysis.

Customization Options

• Titles and Labels: Add titles, axis labels, and legends to provide context.
• Colors and Styles: Customize bar colors, edge styles, and overall plot aesthetics.
• Multiple Histograms: Overlay multiple histograms to compare different datasets or groups.
• Advanced Features: Incorporate density plots, cumulative distributions, or annotations for deeper insights.

---

12. Vega Chart

Introduction to Vega-Lite

Vega-Lite is a high-level grammar for creating interactive visualizations, integrated into Streamlit for flexibility. It allows you to build sophisticated and responsive charts with concise specifications, making it easier to create complex visualizations without extensive coding.

Creating the Vega Chart

import streamlit as st
from vega_datasets import data  # Import sample datasets for Vega

st.write("### 12. Vega Chart")

# Load the cars dataset
source = data.cars()

# Define the Vega-Lite chart specification
chart = {
    "mark": "point",  # Use point marks
    "encoding": {
        "x": {
            "field": "Horsepower",
            "type": "quantitative",
        },
        "y": {
            "field": "Miles_per_Gallon",
            "type": "quantitative",
        },
        "color": {"field": "Origin", "type": "nominal"},
        "shape": {"field": "Origin", "type": "nominal"},
    },
}

# Create tabs to compare different themes
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Vega-Lite native theme"])

with tab1:
    # Display the chart using the Streamlit theme
    st.vega_lite_chart(source, chart, theme="streamlit", use_container_width=True)
with tab2:
    # Display the chart using Vega-Lite's native theme
    st.vega_lite_chart(source, chart, theme=None, use_container_width=True)

Use Cases

• Sophisticated Interactive Visualizations: Create complex charts that respond to user interactions like hovering, clicking, or selecting.
• Data Exploration: Enable users to explore datasets dynamically, uncovering insights through interactive elements.
• Embedding Complex Charts: Integrate detailed and interactive charts within Streamlit apps for comprehensive data presentations.

Customization Tips

• Adding Layers: Incorporate additional layers like lines, bars, or areas to enrich the visualization.
• Custom Scales and Axes: Adjust scales, axis titles, and labels to improve readability and presentation.
• Interactive Selections: Implement interactive selections and filters to allow users to focus on specific data subsets.
• Styling and Themes: Enhance aesthetics by customizing colors, fonts, and overall theme settings.

---

Recap of Chart Types

In this tutorial, we've covered a diverse range of chart types available in Streamlit, each suited for different data visualization needs:

1. Area Chart: Ideal for showing cumulative totals and trends.
2. Bar Chart: Perfect for comparing discrete categories or groups.
3. Line Chart: Excellent for tracking changes over continuous data like time series.
4. Map: Essential for geographical data visualization and spatial analysis.
5. Scatter Chart: Useful for identifying relationships and correlations between variables.
6. Altair Chart: Advanced, interactive visualizations with declarative syntax.
7. Graphviz Chart: Visualizing relationships and workflows through graph diagrams.
8. Plotly Chart: Interactive and publication-quality graphs with extensive customization.
9. pydeck Chart: High-performance geospatial visualizations using WebGL.
10. pyplot Chart: Foundational plotting with Matplotlib's versatile capabilities.
11. Vega Chart: Sophisticated interactive visualizations with Vega-Lite grammar.

---

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee