Spaces:
Runtime error
Runtime error
Create my_dashboard.py
Browse files- pages/my_dashboard.py +295 -0
pages/my_dashboard.py
ADDED
@@ -0,0 +1,295 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import altair as alt
|
2 |
+
import pandas as pd
|
3 |
+
import panel as pn
|
4 |
+
|
5 |
+
# Load the Panel extension
|
6 |
+
|
7 |
+
pn.extension('vega')
|
8 |
+
|
9 |
+
|
10 |
+
# Load the dataset
|
11 |
+
data = pd.read_csv("/Users/kenzabaddou/Downloads/archive/marketing_campaign.csv", sep=";")
|
12 |
+
|
13 |
+
# Data cleaning
|
14 |
+
data = data.rename(columns=lambda x: x.strip()) # Remove leading and trailing spaces from column names
|
15 |
+
data = data.dropna(subset=['Income'])
|
16 |
+
mean_income = data['Income'].mean()
|
17 |
+
data['Income'] = data['Income'].fillna(mean_income)
|
18 |
+
data['total_spent'] = data[['MntWines', 'MntFruits', 'MntMeatProducts', 'MntFishProducts', 'MntSweetProducts', 'MntGoldProds']].sum(axis=1)
|
19 |
+
|
20 |
+
# Define widgets
|
21 |
+
education_dropdown = alt.binding_select(options=sorted(data['Education'].unique()), name='Education Level:')
|
22 |
+
education_select = alt.selection_single(fields=['Education'], bind=education_dropdown, name='Select')
|
23 |
+
|
24 |
+
# New widget: marital status dropdown
|
25 |
+
marital_status_dropdown = alt.binding_select(options=sorted(data['Marital_Status'].unique()), name='Marital Status:')
|
26 |
+
marital_status_select = alt.selection_single(fields=['Marital_Status'], bind=marital_status_dropdown, name='Select')
|
27 |
+
|
28 |
+
# New widget: range slider for number of web visits
|
29 |
+
num_web_visits_slider = alt.binding_range(min=0, max=data['NumWebVisitsMonth'].max(), step=1, name='Web Visits per Month:')
|
30 |
+
num_web_visits_select = alt.selection_single(fields=['NumWebVisitsMonth'], bind=num_web_visits_slider, name='Select')
|
31 |
+
|
32 |
+
# Add new widgets for product selection
|
33 |
+
products = ['MntWines', 'MntFruits', 'MntMeatProducts', 'MntFishProducts', 'MntSweetProducts', 'MntGoldProds']
|
34 |
+
product_x_dropdown = alt.binding_select(options=products, name='Product X:')
|
35 |
+
product_x_select = alt.selection_single(fields=['x_product'], bind=product_x_dropdown, init={'x_product': 'MntWines'})
|
36 |
+
product_y_dropdown = alt.binding_select(options=products, name='Product Y:')
|
37 |
+
product_y_select = alt.selection_single(fields=['y_product'], bind=product_y_dropdown, init={'y_product': 'MntMeatProducts'})
|
38 |
+
|
39 |
+
|
40 |
+
# Define views
|
41 |
+
|
42 |
+
# View 1: Bar chart of customer distribution by education level
|
43 |
+
education_chart = alt.Chart(data).mark_bar().encode(
|
44 |
+
x=alt.X('Education:N', title='Education Level'),
|
45 |
+
y=alt.Y('count():Q', title='Number of Customers'),
|
46 |
+
color='Education:N'
|
47 |
+
).properties(title='Customer Distribution by Education Level')
|
48 |
+
|
49 |
+
|
50 |
+
# Define widgets
|
51 |
+
education_dropdown = alt.binding_select(options=sorted(data['Education'].unique()), name='Education Level:')
|
52 |
+
education_select = alt.selection_single(fields=['Education'], bind=education_dropdown, name='Select')
|
53 |
+
income_slider = alt.binding_range(min=0, max=data['Income'].max(), step=1000, name='Annual Income:')
|
54 |
+
income_select = alt.selection_single(fields=['Income'], bind=income_slider, name='Select')
|
55 |
+
|
56 |
+
# View 2: Scatter plot of customer annual income and total amount spent on products (with interaction)
|
57 |
+
scatter_chart = alt.Chart(data).mark_circle().encode(
|
58 |
+
x=alt.X('Income:Q', title='Annual Income'),
|
59 |
+
y=alt.Y('total_spent:Q', title='Total Amount Spent on Products'),
|
60 |
+
color='Education:N',
|
61 |
+
tooltip=[
|
62 |
+
alt.Tooltip('Education'),
|
63 |
+
alt.Tooltip('Marital_Status'),
|
64 |
+
alt.Tooltip('Income', format='$,.0f'),
|
65 |
+
alt.Tooltip('total_spent', format='$,.0f')
|
66 |
+
]
|
67 |
+
).properties(title='Customer Annual Income vs Amount Spent on Products').add_selection(
|
68 |
+
education_select, income_select, marital_status_select, num_web_visits_select
|
69 |
+
).transform_filter(
|
70 |
+
education_select
|
71 |
+
).transform_filter(
|
72 |
+
income_select
|
73 |
+
).transform_filter(
|
74 |
+
marital_status_select
|
75 |
+
).transform_filter(
|
76 |
+
num_web_visits_select
|
77 |
+
)
|
78 |
+
|
79 |
+
|
80 |
+
# Define linked selection
|
81 |
+
brush = alt.selection(type='interval')
|
82 |
+
|
83 |
+
# View 5: Bar chart - Average Total Spending per Education Level (linked to scatter chart)
|
84 |
+
avg_spending_by_education = alt.Chart(data).mark_bar().encode(
|
85 |
+
x=alt.X('Education:N', title='Education Level'),
|
86 |
+
y=alt.Y('mean(total_spent):Q', title='Average Total Spending'),
|
87 |
+
tooltip=['Education', 'mean(total_spent):Q']
|
88 |
+
).properties(title='Average Total Spending per Education Level').add_selection(
|
89 |
+
brush
|
90 |
+
).transform_filter(
|
91 |
+
education_select
|
92 |
+
)
|
93 |
+
|
94 |
+
# View 6: Yearly Total Amount Spent on Products (linked to enrollment chart)
|
95 |
+
yearly_total_spent_chart = alt.Chart(data).mark_line().encode(
|
96 |
+
x=alt.X('year(Dt_Customer):O', title='Year'),
|
97 |
+
y=alt.Y('sum(total_spent):Q', title='Total Amount Spent'),
|
98 |
+
tooltip=['year(Dt_Customer):O', 'sum(total_spent):Q']
|
99 |
+
).transform_filter(
|
100 |
+
education_select
|
101 |
+
)
|
102 |
+
|
103 |
+
# View 3: Timeline chart of new customer enrollments (with linked highlighting)
|
104 |
+
enrollment_chart = alt.Chart(data).mark_line().encode(
|
105 |
+
x=alt.X('year(Dt_Customer):T', title='Year of Enrollment'),
|
106 |
+
y=alt.Y('count():Q', title='Number of New Enrollments'),
|
107 |
+
color='Marital_Status:N').properties(title='New Customer Enrollments Over Time').add_selection(
|
108 |
+
brush, education_select, income_select, marital_status_select, num_web_visits_select).transform_filter(
|
109 |
+
education_select).transform_filter(income_select).transform_filter(marital_status_select).transform_filter(
|
110 |
+
num_web_visits_select)
|
111 |
+
|
112 |
+
# New View: Average spending per marital status (with linked highlighting)
|
113 |
+
|
114 |
+
avg_spending_by_marital_status = alt.Chart(data).mark_bar().encode(
|
115 |
+
x=alt.X('Marital_Status:N', title='Marital Status'),
|
116 |
+
y=alt.Y('mean(total_spent):Q', title='Average Total Spending'),
|
117 |
+
color='Marital_Status:N',
|
118 |
+
tooltip=['Marital_Status', 'mean(total_spent):Q']).properties(title='Average Total Spending per Marital Status').add_selection(brush)
|
119 |
+
|
120 |
+
import pandas as pd
|
121 |
+
import altair as alt
|
122 |
+
|
123 |
+
|
124 |
+
# Convert the 'Dt_Customer' column to datetime format
|
125 |
+
data['Dt_Customer'] = pd.to_datetime(data['Dt_Customer'])
|
126 |
+
|
127 |
+
# Create 'total_spent' column by summing up spending in different product categories
|
128 |
+
data['total_spent'] = data[['MntWines', 'MntFruits', 'MntMeatProducts', 'MntFishProducts', 'MntSweetProducts', 'MntGoldProds']].sum(axis=1)
|
129 |
+
|
130 |
+
# Calculate the average spending for each combination of Teenhome, Kidhome, and Marital_Status
|
131 |
+
avg_spending = data.groupby(['Teenhome', 'Kidhome', 'Marital_Status'])['total_spent'].mean().reset_index()
|
132 |
+
|
133 |
+
# Create a hover selection
|
134 |
+
hover = alt.selection_single(on='mouseover', nearest=True, empty='none')
|
135 |
+
|
136 |
+
# Create a selection for the dropdown
|
137 |
+
marital_status_dropdown = alt.binding_select(options=sorted(data['Marital_Status'].unique()), name='Marital Status:')
|
138 |
+
marital_status_select = alt.selection_single(fields=['Marital_Status'], bind=marital_status_dropdown, init={'Marital_Status': 'Married'})
|
139 |
+
|
140 |
+
# Create a grouped bar chart for kids
|
141 |
+
chart_kids = alt.Chart(avg_spending).mark_bar().encode(
|
142 |
+
x=alt.X('Kidhome:O', title='Number of Kids at Home'),
|
143 |
+
y=alt.Y('total_spent:Q', title='Average Spending'),
|
144 |
+
color=alt.condition(hover, 'Kidhome:O', alt.value('lightgray'), legend=alt.Legend(title='Number of Kids at Home')),
|
145 |
+
tooltip=['Teenhome', 'Kidhome', 'total_spent', 'Marital_Status']
|
146 |
+
).properties(title='Average Spending by Number of Kids at Home (Filtered by Marital Status)').add_selection(
|
147 |
+
hover
|
148 |
+
)
|
149 |
+
|
150 |
+
# Create a grouped bar chart for teens
|
151 |
+
chart_teens = alt.Chart(avg_spending).mark_bar().encode(
|
152 |
+
x=alt.X('Teenhome:O', title='Number of Teens at Home'),
|
153 |
+
y=alt.Y('total_spent:Q', title='Average Spending'),
|
154 |
+
color=alt.condition(hover, 'Teenhome:O', alt.value('lightgray'), legend=alt.Legend(title='Number of Teens at Home')),
|
155 |
+
tooltip=['Teenhome', 'Kidhome', 'total_spent', 'Marital_Status']
|
156 |
+
).properties(title='Average Spending by Number of Teens at Home (Filtered by Marital Status)').add_selection(
|
157 |
+
hover
|
158 |
+
)
|
159 |
+
|
160 |
+
# Combine the charts
|
161 |
+
concat_chart = alt.hconcat(chart_kids, chart_teens).add_selection(
|
162 |
+
marital_status_select
|
163 |
+
).transform_filter(
|
164 |
+
marital_status_select
|
165 |
+
)
|
166 |
+
|
167 |
+
|
168 |
+
"""scatter_plot = alt.Chart(data).mark_circle().encode(
|
169 |
+
x=alt.X('NumWebVisitsMonth:Q', title='Number of Web Visits per Month'),
|
170 |
+
y=alt.Y('NumWebPurchases:Q', title='Number of Web Purchases'),
|
171 |
+
size=alt.Size('count():Q', scale=alt.Scale(range=[50, 500]), legend=alt.Legend(title='Number of Customers')),
|
172 |
+
color=alt.Color('count():Q', scale=alt.Scale(scheme='viridis'), legend=None),
|
173 |
+
tooltip=['NumWebVisitsMonth', 'NumWebPurchases', 'count()']
|
174 |
+
).properties(title='Scatter Plot of Web Visits per Month vs. Web Purchases')
|
175 |
+
|
176 |
+
scatter_plot.interactive()"""
|
177 |
+
|
178 |
+
# Define dropdown selection for marital status
|
179 |
+
marital_status_dropdown = alt.binding_select(options=data['Marital_Status'].unique().tolist(), name='Marital Status: ')
|
180 |
+
marital_status_selection = alt.selection_single(fields=['Marital_Status'], bind=marital_status_dropdown, name='Marital_Status', init={'Marital_Status': data['Marital_Status'].iloc[0]})
|
181 |
+
|
182 |
+
# Add a scatter plot and filter by marital status
|
183 |
+
scatter_plot_filtered = alt.Chart(data).mark_circle().encode(
|
184 |
+
x=alt.X('NumWebVisitsMonth:Q', title='Number of Web Visits per Month'),
|
185 |
+
y=alt.Y('NumWebPurchases:Q', title='Number of Web Purchases'),
|
186 |
+
size=alt.Size('count():Q', scale=alt.Scale(range=[50, 500]), legend=alt.Legend(title='Number of Customers')),
|
187 |
+
color=alt.Color('count():Q', scale=alt.Scale(scheme='viridis'), legend=None),
|
188 |
+
tooltip=['NumWebVisitsMonth', 'NumWebPurchases', 'count()']
|
189 |
+
).properties(title='Scatter Plot of Web Visits per Month vs. Web Purchases Filtered by Marital Status').transform_filter(
|
190 |
+
marital_status_selection
|
191 |
+
)
|
192 |
+
|
193 |
+
# Add interactivity and the marital status selection to the scatter plot
|
194 |
+
interactive_scatter_plot_filtered = scatter_plot_filtered.interactive().add_selection(marital_status_selection)
|
195 |
+
interactive_scatter_plot_filtered
|
196 |
+
|
197 |
+
|
198 |
+
# Group by 'Dt_Customer' and calculate average spending for new and returning customers
|
199 |
+
new_customers = data[data['NumWebPurchases'] == 0].groupby('Dt_Customer')['total_spent'].mean().reset_index()
|
200 |
+
returning_customers = data[data['NumWebPurchases'] > 0].groupby('Dt_Customer')['total_spent'].mean().reset_index()
|
201 |
+
|
202 |
+
|
203 |
+
# new_customers and returning_customers DataFrames
|
204 |
+
# Create line charts for new and returning customers without filtering
|
205 |
+
new_line = alt.Chart(new_customers).mark_line().encode(
|
206 |
+
x=alt.X('Dt_Customer:T', title='Date'),
|
207 |
+
y=alt.Y('total_spent:Q', title='Average Spending'),
|
208 |
+
color=alt.value('blue'),
|
209 |
+
tooltip=['Dt_Customer', 'total_spent']
|
210 |
+
).properties(title='New Customers')
|
211 |
+
|
212 |
+
returning_line = alt.Chart(returning_customers).mark_line().encode(
|
213 |
+
x=alt.X('Dt_Customer:T', title='Date'),
|
214 |
+
y=alt.Y('total_spent:Q', title='Average Spending'),
|
215 |
+
color=alt.value('green'),
|
216 |
+
tooltip=['Dt_Customer', 'total_spent']
|
217 |
+
).properties(title='Returning Customers')
|
218 |
+
|
219 |
+
# Display the charts side by side
|
220 |
+
combined_chart = alt.hconcat(new_line, returning_line)
|
221 |
+
combined_chart
|
222 |
+
|
223 |
+
# Merge Marital_Status to new_customers and returning_customers DataFrames
|
224 |
+
|
225 |
+
new_customers = new_customers.merge(data[['Dt_Customer', 'Marital_Status']], on='Dt_Customer', how='left')
|
226 |
+
returning_customers = returning_customers.merge(data[['Dt_Customer', 'Marital_Status']], on='Dt_Customer', how='left')
|
227 |
+
|
228 |
+
# Filter data by marital status using transform_filter within the charts
|
229 |
+
new_line_filtered = alt.Chart(new_customers).mark_line().encode(
|
230 |
+
x=alt.X('Dt_Customer:T', title='Date'),
|
231 |
+
y=alt.Y('total_spent:Q', title='Average Spending'),
|
232 |
+
color=alt.value('blue'),
|
233 |
+
tooltip=['Dt_Customer', 'total_spent']
|
234 |
+
).properties(title='New Customers').transform_filter(
|
235 |
+
marital_status_selection
|
236 |
+
)
|
237 |
+
|
238 |
+
returning_line_filtered = alt.Chart(returning_customers).mark_line().encode(
|
239 |
+
x=alt.X('Dt_Customer:T', title='Date'),
|
240 |
+
y=alt.Y('total_spent:Q', title='Average Spending'),
|
241 |
+
color=alt.value('green'),
|
242 |
+
tooltip=['Dt_Customer', 'total_spent']
|
243 |
+
).properties(title='Returning Customers').transform_filter(
|
244 |
+
marital_status_selection
|
245 |
+
)
|
246 |
+
|
247 |
+
# Add interactivity for panning and zooming
|
248 |
+
interactive_chart_filtered = alt.layer(new_line_filtered, returning_line_filtered).resolve_scale(y='shared').interactive().add_selection(marital_status_selection)
|
249 |
+
|
250 |
+
# Combine the interactive chart, the legend, and the marital status selection
|
251 |
+
# Create legend
|
252 |
+
legend = alt.Chart(pd.DataFrame({'legend': ['New Customers', 'Returning Customers'], 'color': ['blue', 'green']})).mark_point().encode(
|
253 |
+
x=alt.value(20),
|
254 |
+
y=alt.Y('legend', title=None),
|
255 |
+
color=alt.Color('color', scale=None),
|
256 |
+
tooltip=['legend']
|
257 |
+
)
|
258 |
+
|
259 |
+
# Combine the interactive chart, the legend, and the marital status selection
|
260 |
+
final_chart_filtered = alt.hconcat(interactive_chart_filtered, legend).properties(title='Average Spending of New vs Returning Customers by Marital Status')
|
261 |
+
final_chart_filtered
|
262 |
+
|
263 |
+
import panel as pn
|
264 |
+
pn.extension('vega')
|
265 |
+
|
266 |
+
|
267 |
+
# Define dashboard layout
|
268 |
+
dashboard = pn.Column(
|
269 |
+
pn.Row(
|
270 |
+
pn.Column(
|
271 |
+
education_chart,
|
272 |
+
avg_spending_by_education,
|
273 |
+
avg_spending_by_marital_status,
|
274 |
+
width=350
|
275 |
+
),
|
276 |
+
pn.Column(
|
277 |
+
scatter_chart,
|
278 |
+
enrollment_chart,
|
279 |
+
width=700
|
280 |
+
),
|
281 |
+
),
|
282 |
+
pn.Row(
|
283 |
+
concat_chart,
|
284 |
+
width=1000
|
285 |
+
),
|
286 |
+
pn.Row(
|
287 |
+
final_chart_filtered,
|
288 |
+
width=1000
|
289 |
+
),
|
290 |
+
)
|
291 |
+
|
292 |
+
|
293 |
+
# Display dashboard
|
294 |
+
dashboard.servable()
|
295 |
+
|