Building interactive data dashboards can seem intimidating.
Especially if you're unfamiliar with frontend technologies like HTML/CSS/ JS.
But what if you could create a fully functional, production-ready data science dashboard using just Python?
Enter Taipy, an open-source library that simplifies the process of creating data apps.
In this tutorial, Mariya Sha will guide you through building a stock value dashboard using Taipy, Plotly, and a dataset from Kaggle.
Our app will dynamically filter data, display graphs, and handle user inputs—all from scratch.
Ready to dive in? Let’s get started!
Step 1: Setting Up Your Environment
First, we need to create a new Python environment. If you use Conda, you can set it up as follows:
conda create -n ds_env python=3.11
conda activate ds_env
pip install taipy pandas plotly
Clone the resources for this project:
git clone https://github.com/MariyaSha/data_science_dashboard.git
cd data_science_dashboard/starter_files
This will serve as our project root directory. Inside, you’ll find images, a wireframe, and a Python file (main.py
) to start.
Step 2: Designing the GUI with Taipy
Let’s add a header and a logo to our app. Open main.py and start coding:
import taipy.gui as tgb
with tgb.page("Stock Dashboard"):
# Add a logo
tgb.image("images/icons/logo.png", width="10vw")
# Add a title
tgb.text("# S&P 500 Stock Value Over Time", mode="md")
Run your app:
taipy run main.py
Navigate to http://localhost:5000, and you’ll see your basic app!
Step 3: Adding User Inputs
To filter data by date, add a date range selector:
import datetime
dates = [datetime.date(2023, 1, 1), datetime.date(2024, 1, 1)]
with tgb.page("Stock Dashboard"):
# Existing elements...
# Add date range selector
tgb.date_range(
value="{dates}",
label_start="Start Date",
label_end="End Date",
)
Step 4: Dynamic Data Handling with Taipy
Let’s load our dataset and filter it dynamically based on user inputs.
import pandas as pd
# Load the stock data
stock_data = pd.read_csv("data/sp500_stocks.csv")
def filter_data(state, name, value):
if name == "dates":
start, end = state.dates
filtered_data = stock_data[
(stock_data["Date"] >= str(start)) &
(stock_data["Date"] <= str(end))
]
state.filtered_data = filtered_data
tgb.add_callback("filter_data", filter_data)
Step 5: Visualizing the Data
Finally, let’s plot the data with Plotly:
import plotly.graph_objects as go
def create_chart(data):
fig = go.Figure()
fig.add_trace(
go.Scatter(
x=data["Date"],
y=data["High"],
name="Stock Value",
mode="lines"
)
)
return fig
with tgb.page("Stock Dashboard"):
# Existing elements...
# Display the chart
tgb.chart(figure="{create_chart(filtered_data)}")
Final Thoughts
And voilà!
You’ve built a stock dashboard with Taipy, handling dynamic user inputs and data visualization—all without writing a single line of HTML, CSS, or JavaScript.
Want to take it further?
Explore Taipy Scenarios to enable even more dynamic backend interactions. Check out the official Taipy GitHub repository and contribute to their open-source initiatives!
PS: you can watch the video tutorial here.
Top comments (12)
If you're more comfortable with videos, here's the full tutorial
Great 🔥
Pretty awesome! I've used Taipy before and taught it for a course of mine as well.
Awesome article!
So nice explaining
Very interesting and fascinating story
Awesome ❤️🔥
Nice hey!
nice tutorial, thanks. I'll give it a try.
And thanks for the video
the video tutorial is awesome! thanks for this resources