Autumn App Challenge

[mayaradaher]

Hi everyone,
Here’s my app submission for the Plotly Autumn App Challenge.

Key Features:

• Design and Responsiveness: CSS makes up 10% of the code, reflecting a significant investment in the app’s design and responsiveness.

• Advanced Search: The app includes a Search bar where users can look up restaurants by address. The search functionality is enhanced by using SentenceTransformer’s multi-qa-mpnet-base-dot-v1 model.

• Enhanced Dataset: The dataset has been enriched with restaurant photos obtained through web scraping, offering a more visual experience.

• Multi-language Support: The app supports both English and Portuguese, with language selection available via a dropdown menu.

• Map Options: Users can switch between three different map types—OpenStreetMap, ESRI, and CARTO—providing flexibility in viewing preferences.

I deployed it on Google Cloud, and you can access it here
And here’s the GitHub repo

Below is an overview of my app.

[sduza1r]

Michelin Star Data Set Dashboard

This comprehensive web application provides an interactive visualization of Michelin-starred restaurants data. The dashboard offers insights into restaurant distributions, awards, cuisines, and facilities across various cities.

Live Application: Michelin Star Restaurant Guide Dashboard

GitHub Repository: michelin-star-restaurant-guide-dashboard

Features

City Selection

Users can select a specific city from a dropdown menu, which filters the data displayed in all visualizations.

Award Filter

A multi-select dropdown allows users to filter restaurants by Michelin recognition levels:

• 3 Stars
• 2 Stars
• 1 Star
• Bib Gourmand
• Selected Restaurants

Theme Toggle

The dashboard includes a light/dark mode toggle for user preference and improved readability in different lighting conditions.

Interactive Visualizations

Facility-Award Correlation Heatmap

This heatmap displays the correlation between restaurant facilities/services and Michelin awards for the selected city. It helps identify which amenities are most associated with higher Michelin ratings. The correlation is calculated using Point-biserial correlation, which measures the relationship between a binary variable (presence or absence of a facility) and a continuous variable (encoded Michelin award level). This method allows for quantifying the strength and direction of the association between each facility and the Michelin rating.

Top 5 Cuisines Table

A data table showcasing the five most prevalent cuisines in the selected city, along with their respective counts.

Award Distribution Map

An interactive scatter map plots the locations of Michelin-recognized restaurants in the chosen city. Each point is color-coded based on the award level, providing a geographical overview of restaurant distribution.

Awards by City Bar Chart

This bar chart illustrates the distribution of Michelin awards within the selected city, offering a quick comparison of the number of restaurants at each recognition level.

Technical Implementation

The dashboard is built using the following technologies:

• Dash: A Python framework for building analytical web applications
• Plotly: For creating interactive visualizations
• Pandas: For data manipulation and analysis
• NumPy: For numerical computations
• Bootstrap: For responsive layout and styling
• SciPy: For calculating Point-biserial correlation between facilities and awards
• Scikit-learn: For one-hot encoding of facilities data using MultiLabelBinarizer

Key files in the project structure:

• app.py: Main application file containing the Dash layout and callbacks
• src/data_cleaning.py: Functions for data preprocessing
• src/facility_award_correlation.py: Correlation analysis between facilities and awards
• src/figures.py: Functions to generate various visualizations

Data Source

The dashboard utilizes the “michelin_by_Jerry_Ng.csv” dataset, which contains detailed information about Michelin-recognized restaurants worldwide.

Light and Dark Mode

The application supports both light and dark modes for enhanced user experience.

Light Mode

In light mode, the dashboard uses a white background and the “carto-voyager” map style for the scatter map.

Dark Mode

When switched to dark mode, the dashboard applies a dark background (#111111) and uses the “carto-darkmatter” map style for the scatter map.

Conclusion

This Michelin Star Data Set Dashboard provides a user-friendly interface for exploring and analyzing Michelin-recognized restaurants across different cities. Its interactive features and visualizations offer valuable insights into the distribution of awards, popular cuisines, and the relationship between restaurant amenities and Michelin ratings.

[adamschroeder]

@mayaradaher strikes again! Beautiful app. Thank you Mayara.

[adamschroeder]

Nice app, @sduza1r . Where have you been hiding all this time
welcome to the community.

[adamschroeder]

Thank you everyone for your amazing app submissions.

The challenge is officially closed. In the next couple of weeks, a group of app judges from Plotly will review the apps.

Final results will be posted here once the judging is complete.

[adamschroeder]

Thank you to all community members that have participated in the Michelin Plotly app challenge. The Plotly staff really enjoyed reviewing your apps and exploring the multiple features, graphs, and LLM integrations.

We are truly honored to have such a dedicated group of community members who have mind-blowing expertise in Plotly and Dash.

The Plotly judging panel has come back with their decision to grant the first place to…

Community member, Ian, for his Michelin Dash app with the following code.

A beautiful and polished Dash app. Excellent UX design choices and very good use of interactive controls and filters, single and multi-filters. Choosing to separate the app into a “Guide” view and an “Analysis” view is very effective in encouraging users to interactively explore while not overloading them with too much info before they’re ready to dive deeper. This guided analytics approach is very effective.

The analysis tab, specifically, is so rich and allows the viewer to slice by economic health and even overlay restaurants by wine regions in France.

Community member, Niek, for the following Dash app with the code.

This app has a great recommender interface with clear and quick results. It has an attractive UI/UX design with a helpful overview dashboard, and the ability to drill down into certain charts is awesome. Plotly maps are used effectively and we appreciated the symbology applied to the maps.

The integration of a LLM is a strong highlight, offering accurate and helpful responses to general questions. Overall, the app is well done!

Community member, Nils, for his Dash app with the following code.

Strong opening view with summary statistics clearly shown. Nice navigation and drill-downs. The app has a very useful LLM integration with “plan my day” and “alternative restaurants” functionalities. It offers a well-defined customer journey, especially for travelers.

There is good use of Plotly legend actions to toggle on and off without needing a separate control. As a cherry on top of the ice cream, we loved the styling of the bar charts with rounded edges as well as the color scheme chosen.

A big thank-you and a shout-out to all the other community members and the apps that they submitted to the challenge:

• Aapp by sduza
• App by Mayara
• App by Gab
• App by Jan and Felipe
• App code by Chinmay
• Tutorial video that shows how to make Plotly graphs for the challenge, by Elias