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鈥攁ll from scratch.
Ready to dive in? Let鈥檚 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鈥檒l find images, a wireframe, and a Python file (main.py
) to start.
Step 2: Designing the GUI with Taipy
Let鈥檚 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鈥檒l 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鈥檚 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鈥檚 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鈥檝e built a stock dashboard with Taipy, handling dynamic user inputs and data visualization鈥攁ll 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 (15)
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!
Very interesting and fascinating story
So nice explaining
Interesting, especially the video which goes much further ;)
Awesome 鉂わ笍鈥嶐煍�/p>
Nice hey!
nice tutorial, thanks. I'll give it a try.
And thanks for the video