DEV Community

CESAR NIKOLAS CAMAC MELENDEZ
CESAR NIKOLAS CAMAC MELENDEZ

Posted on

Building Interactive Dashboards with Streamlit, Dash, and Bokeh: From Code to Cloud

#cloud #datascience #python #webdev

Data visualization plays a central role in computer science and data-driven decision making. While libraries like Matplotlib and Seaborn are often the first tools learned, more interactive frameworks exist to build dashboards and reports for real-world applications. Among them, Streamlit, Dash, and Bokeh stand out because they allow developers to turn Python code into full web applications without requiring advanced web development skills.

1. Streamlit

Streamlit is one of the simplest ways to build interactive dashboards. It allows developers to use pure Python code and automatically creates a responsive web interface. You can add widgets (sliders, checkboxes, text inputs) with minimal syntax, making it an ideal tool for rapid prototyping.

2. Dash

Dash, developed by Plotly, is more powerful and customizable. It combines Flask (for backend), React.js (for frontend), and Plotly (for charts). Dash applications are more structured and allow you to build enterprise-level dashboards with callbacks and layouts.

3. Bokeh

Bokeh is a library designed for creating interactive and scalable visualizations in the browser. Unlike Streamlit or Dash, Bokeh focuses mainly on visualizations, but it can also serve as a backend for dashboards.

Example: Building and Deploying a Dashboard with Streamlit

Below is a small example using Streamlit to visualize a dataset of random values. We’ll then deploy it to Streamlit Cloud (free tier for students).

Code (app.py) 

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

# Title
st.title("📊 Interactive Data Dashboard Example")

# Sidebar options
st.sidebar.header("Controls")
n_points = st.sidebar.slider("Number of Data Points", 10, 500, 100)
chart_type = st.sidebar.selectbox("Chart Type", ["Line", "Scatter", "Histogram"])

# Generate random data
data = pd.DataFrame({
    "x": np.arange(n_points),
    "y": np.random.randn(n_points).cumsum()
})

# Show dataframe
st.write("### Randomly Generated Data", data.head())

# Visualization
st.write("### Visualization")
if chart_type == "Line":
    st.line_chart(data.set_index("x"))
elif chart_type == "Scatter":
    st.scatter_chart(data.set_index("x"))
elif chart_type == "Histogram":
    fig, ax = plt.subplots()
    ax.hist(data["y"], bins=20, color="skyblue", edgecolor="black")
    st.pyplot(fig)
Enter fullscreen mode Exit fullscreen mode

Running Locally 

pip install streamlit pandas numpy matplotlib
streamlit run app.py
Enter fullscreen mode Exit fullscreen mode

Visit: http://localhost:8501

Deployment to the Cloud (Streamlit Cloud Example)

  1. Push your code to GitHub (repository with app.py and requirements.txt).

  • Example requirements.txt:

     streamlit
 pandas
 numpy
 matplotlib

  1. Go to https://streamlit.io/cloud and log in with GitHub.

  2. Click “New App”, select your repository and branch, and choose app.py as the entry file.

  3. Deploy — in a few seconds, your app will be live with a public URL like:

   https://your-username-your-repo.streamlit.app
Enter fullscreen mode Exit fullscreen mode

Why Use These Tools?

  • Streamlit → quick, simple dashboards (ideal for students, prototypes).
  • Dash → structured, production-ready dashboards (enterprise use).
  • Bokeh → powerful interactive plots with flexibility.

Conclusion

Streamlit, Dash, and Bokeh expand the possibilities of data visualization beyond static plots. They enable computer science students and professionals to share insights interactively and even deploy them as web apps. Deploying to cloud platforms like Streamlit Cloud, Heroku, or AWS makes these tools accessible from anywhere, turning local experiments into shareable projects.

Top comments (0)