For Project 3, we were asked to create an interactive web application with at least 3 visualizations using Flask, HTML, CSS, JavaScript, at least 2 JavaScript libraries and a SQL database. This web application was constructed in 14 days.
Many of us have on occasion been tasked with selecting a bottle of wine for a house-warming gift or holiday party and found ourselves overwhelmed by the sheer volume of options on the shelf! So we set out to build a wine selection dashboard to make it easier for the occasional wine drinker to find his/her next great wine or "Grape Choice".
We used a wine review dataset which was scraped from WineEnthusiast in 2017, available on Kaggle here. The original dataset contained nearly 130,000 records of wine and included the following columns: the label title, points, price, varietal, winery, country, province, region, designation, reviewers' name and twitter handle and the reviewers' description of the wine. We cleaned the data in Pandas/Python as follows: removed null values, dropped wines priced over $200 and condensed the dataset to the last 50 years. The final, cleaned dataset contained over 99,000 records. The final dataset was uploaded to a SQLite database.
- We deployed Flask as the web server to host the page routes and import the data housed in the SQLite database through SQLAlchemy.
- The web application navigation contains links to 3 webpages (Project Overview, Dashboard and Our Team) and a link to this GitHub repository.
- To see the live version of the website application, download the source code and launch the Flask app.py file. The web app is also hosted on render.com through the following link: grape_choice
Project Overview:
Dashboard:
- The Dashboard contains a dropdown menu for the user to select the type of wine they are interested in: White, Red, Rosé or Sparkling.
- Once selected, the web application will display a horizontal bar chart of the Top 10 Wines in the category based on points.
- At the bottom of the page is a chart showing the Top 25 and Bottom 25 Wines ranked by Price per Point (lower is better) for the category selected in the dropdown menu.
- Both the Top 10 by Points and the Top/Bottom Price per Point bar charts update when the dropdown selection changes.
- On the right side of the dashboard is a stream graph from Highcharts which depicts the number of wines by country by wine points. This chart also has a zoom feature.
- All three charts are interactive and contain hover features showing additional data details.
Our Team Page:
Our team page contains links to each member's GitHub repository, LinkedIn profile and Twitter account that displays when the user hovers over an avatar.
- Data Cleansing: Pandas and Python
- Data Warehousing: SQLite was used to house the dataset
- Frontend: HTML5, CSS and Bootstrapping for content and styling
- Backend Data Manipulation: JavaScript, D3, Plotly and Highcharts for interactive data visualizations
- Web Enablement: Flask was used as the skinny web server and was also the connection point between the SQLite database via SQLAlchemy, JavaScript and HTML files
- Web App Hosting: The web app is hosted on Render.com through a connectionn to GitHub
In the future, we could expand upon this web application by:
- Adding additional user selection multi-level dropdowns or sliders for price range, wine points and/or province & country
- Applying machine learning to predict wine rating based on variables in the data set
- Deploying a recommendation engine based on user inputs or a similarly rated wine selection
- Securing more recent data