I still remember the first time I had to present data insights to a non-technical stakeholder - the struggle was real. The static charts and tables just didn't cut it, and I knew I needed something more engaging. That's when I discovered the power of interactive dashboards with Plotly and Dash. In this post, we'll build a real-world example using the Netflix Tech Blog RSS feed, and I'll share my lessons learned on how to create interactive visualizations that drive business decisions. You'll learn how to fetch and parse real-world data, create interactive plots, and deploy a web-based dashboard that will impress your stakeholders.
Key Takeaways
- How to fetch and parse real-world data from an RSS feed using Python.
- How to create interactive visualizations with Plotly that drive business decisions.
- How to deploy a web-based dashboard with Dash that showcases your data insights.
The Problem
As data scientists and developers, we often struggle to create interactive and engaging visualizations that can be shared with stakeholders and decision-makers, particularly when working with large and complex datasets. This post addresses the pain point of creating interactive dashboards that can be used to explore and analyze real-world data.
Data and Sources
The Netflix Tech Blog RSS feed (https://medium.com/feed/netflix-techblog) will be used as the data source for this example, providing a real-world and dynamic dataset to demonstrate the capabilities of Plotly and Dash. Data accessed on 2024-09-16.
Step 1 — Fetching and Parsing RSS Feed Data:
We'll start by fetching the Netflix Tech Blog RSS feed data using the `feedparser` library. This will give us a list of recent posts, which we can then parse and analyze.
import feedparser
feed = feedparser.parse('https://medium.com/feed/netflix-techblog')
posts = [entry.title for entry in feed.entries]
Step 2 — Creating Interactive Visualizations with Plotly:
Next, we'll create interactive visualizations with Plotly to showcase the data insights. We'll use a simple bar chart to display the number of posts per month.
import plotly.express as px
import pandas as pd
# Create a sample dataset
data = pd.DataFrame({'Month': ['Jan', 'Feb', 'Mar'], 'Posts': [10, 20, 30]})
# Create a bar chart
fig = px.bar(data, x='Month', y='Posts')
fig.show()
Step 3 — Building a Web-Based Dashboard with Dash:
Now that we have our interactive visualizations, let's deploy a web-based dashboard with Dash to showcase our data insights.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1('Netflix Tech Blog Dashboard'),
dcc.Graph(id='posts-graph'),
dcc.Dropdown(
id='month-dropdown',
options=[{'label': 'Jan', 'value': 'Jan'}, {'label': 'Feb', 'value': 'Feb'}, {'label': 'Mar', 'value': 'Mar'}],
value='Jan'
)
])
@app.callback(
Output('posts-graph', 'figure'),
[Input('month-dropdown', 'value')]
)
def update_graph(month):
# Update the graph based on the selected month
data = pd.DataFrame({'Month': [month], 'Posts': [10]})
fig = px.bar(data, x='Month', y='Posts')
return fig
if __name__ == '__main__':
app.run_server()
Step 4 — Integrating Real-World Data and Visualizations:
Finally, let's integrate our real-world data and interactive visualizations into the dashboard. We'll use the parsed RSS feed data to update the graph based on the selected month.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1('Netflix Tech Blog Dashboard'),
dcc.Graph(id='posts-graph'),
dcc.Dropdown(
id='month-dropdown',
options=[{'label': 'Jan', 'value': 'Jan'}, {'label': 'Feb', 'value': 'Feb'}, {'label': 'Mar', 'value': 'Mar'}],
value='Jan'
)
])
@app.callback(
Output('posts-graph', 'figure'),
[Input('month-dropdown', 'value')]
)
def update_graph(month):
# Update the graph based on the selected month
feed = feedparser.parse('https://medium.com/feed/netflix-techblog')
posts = [entry.title for entry in feed.entries]
data = pd.DataFrame({'Month': [month], 'Posts': [len(posts)]})
fig = px.bar(data, x='Month', y='Posts')
return fig
if __name__ == '__main__':
app.run_server()
Complete Script
The full runnable script combining all steps:
#!/usr/bin/env python3
import feedparser
import plotly.express as px
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
def fetch_rss_data():
feed = feedparser.parse('https://medium.com/feed/netflix-techblog')
posts = [entry.title for entry in feed.entries]
return posts
def create_visualization(data):
fig = px.bar(data, x='Month', y='Posts')
return fig
def build_dashboard():
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1('Netflix Tech Blog Dashboard'),
dcc.Graph(id='posts-graph'),
dcc.Dropdown(
id='month-dropdown',
options=[{'label': 'Jan', 'value': 'Jan'}, {'label': 'Feb', 'value': 'Feb'}, {'label': 'Mar', 'value': 'Mar'}],
value='Jan'
)
])
@app.callback(
Output('posts-graph', 'figure'),
[Input('month-dropdown', 'value')]
)
def update_graph(month):
# Update the graph based on the selected month
data = pd.DataFrame({'Month': [month], 'Posts': [10]})
fig = px.bar(data, x='Month', y='Posts')
return fig
if __name__ == '__main__':
app.run_server()
if __name__ == '__main__':
build_dashboard()
Expected Output
When you run the script, you should see a web-based dashboard with an interactive bar chart displaying the number of posts per month. You can select a month from the dropdown menu to update the graph.
Limitations and Tradeoffs
This approach has some limitations, such as the need for a stable internet connection to fetch the RSS feed data and the potential for slow performance with large datasets. Additionally, the dashboard is not optimized for mobile devices, and the visualization is limited to a simple bar chart.
Frequently Asked Questions
How do I customize the dashboard layout?
You can customize the dashboard layout by modifying the `app.layout` variable in the `build_dashboard` function. For example, you can add more graphs, tables, or other HTML components to the layout.
How do I deploy the dashboard to a production environment?
You can deploy the dashboard to a production environment by using a WSGI server such as Gunicorn or uWSGI. You'll need to create a `requirements.txt` file with the necessary dependencies and configure the server to run the `app` instance.
How do I handle errors and exceptions in the dashboard?
You can handle errors and exceptions in the dashboard by using try-except blocks in the `update_graph` function. For example, you can catch exceptions raised by the `feedparser` library when fetching the RSS feed data.
What I'd Change
In conclusion, building interactive dashboards with Plotly and Dash is a powerful way to drive data-driven decision-making. However, I would change the approach by using a more robust data storage solution, such as a database, to store the RSS feed data. This would allow for faster performance and more efficient data retrieval. Additionally, I would optimize the dashboard layout for mobile devices and add more interactive visualizations to provide a richer user experience.
