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 (15)
If you're more comfortable with videos, here's the full tutorial
Pretty awesome! I've used Taipy before and taught it for a course of mine as well.
Awesome article!
Great đ„
Awesome â€ïžâđ„
Nice hey!
Very interesting and fascinating story
So nice explaining
Interesting, especially the video which goes much further ;)
nice tutorial, thanks. I'll give it a try.
And thanks for the video