ubc-mds / foundation-shades-pydash

Foundation Shades Across the Globe App. Cosmetics data visualization dashboard built with Dash for studying the best selling brands across US, Japan, Indian, and Nigeria.

Foundation Shades Across the Globe App

• App link: https://foundation-product-dashboard.herokuapp.com/

• Author: Ela Bandari, Ling (Elina) Lin, Kangbo Lu, Yuting (Rachel) Xu

Description of the app

This interactive app consists of visualization charts (histograms and color cards) that display the shades (based on lightness) in global best-selling foundation products of different beauty brands around the world. The filters on the top allow users to compare shade distributions by countries and by brands offered in a particular country. On the top charts, users can select the category legends underneath to focus on only one shade distribution, or zoom in on the distributions to closely examine a particular range of shades. There are also customizable sliders in the bottom for users to specify ranges of variables (brightness, hue and saturation), and the app will return the top 5 similar shades available in the specified market based on filter. Both distributions and search results will be updated automatically when changing the filters or sliders.

Dashboad Sketch Design

Implementation and User Guide

1. Filter foundation lightness histograms by country:

2. Single or double click on legend to filter categories:

3. Use your mouse to select regions:

4. Use foundation HSV value slider to find matching products by color:

foundation-shades-pydash's Issues

Milestone 1 feedback

Hey Group 2,

Congrats on completing Milestone 1! Seems you're already building a solid foundation. Your proposal does well touching on all the core concepts and your dataset and purpose independently seem solid (although be careful with grammar and run-on sentences!). I would note that it may be useful to look only at lightness or brightness and not both (cf. HSL vs HSB/HSV). I think the research questions you pose are also reasonable, though the usage scenario is rather long-winded and a bit unclear. It would have been better to focus this section on the broader usage scenario without focusing so much on the specifics. I do also wonder if this dashboard may actually make more sense for a consumer than for a company though.

With regards to your dashboard:

• I think it looks quite useful. Everything is quite clearly presented and it seems it should be rather user friendly at the same time
• It presents most relevant info with a good level of complexity for milestone 2. If you have time to expand it in the future, perhaps you could consider the ability to toggle between distributions of H, S, and L (or V)
• It might also be interesting to make the HSV rangesliders draw a bounding box over some projected HSV chart (a chart like you'd see in a typical color picker)

Dashboard Description and Sketching

Hi everyone, here is the Google doc link to work on:

https://docs.google.com/document/d/1DwMWtf9BHZ92dZ-VkzYcku3BM1--xpHLFnO2vjDqarI/edit?usp=sharing

Milestone 4 feedback

Hey Group 2,

Congrats on finishing this project! I think your final product turned out quite well. The new colour schemes are much better (although I might've gone less saturated). These colours also no longer have that tooltip contrast issue, so you've indirectly solved that problem as well, which is nice. In a longer project a few more features could be added, as discussed before, but for this timescale I think the functionality is excellent. I would still have liked to see better spacing with the titles and different text styling to help visually separate different components, but this is a relatively minor point.

Overall, great job! And best of luck with the rest of your courses!

Milestone 4 Tasks

Repo:

• 1. Update About to include description, app link, keywords

app.py

• 2. set title
• 3. take away debug=True
• 4. Refine histograms with plotly
• 5. Address TA feedback from Milestone 2 & 3 & Peer Feedbacks

Deployment on Heroku:

• 6. setup Heroku's GitHub integration to automate our deploys

Reflection (in doc/reflection-milestone4.md):

• 7. Reflection (Why did we choose to go with Python or R)

Document docstrings (Optional):

• 8. write functions' docstrings

Auto-deployed Heroku PR (Optional)

• 9. include auto-deployed Heroku PR

Canvas Submission:

• 10. canvas-submission.html (include link to auto-deployed Heroku PR)

Research Questions

Hi Team,

Please post your ideas for research questions for the makeup shades dataset below.

Milestone 2 Feedback

Hey Group 2, congrats on completing your eponymous milestone! Overall, I think your dashboard looks great. I appreciate the clear intuitive design and the wholly effective use of interactivity. Your reflection was also well thought out and addressed most of the issues I see. That said, I have a few minor points of feedback:

• would be nice to fit this all on one medium sized screen, which I think may be possible in your case
• slider should be set not to highlight everything to the left since you're just selecting X not from 0 to X
• could put brand and product name on separate lines to avoid the line split you get right now with longer names
• slider spacing is broken locally for me, but looks fine on heroku, so ok. (See this mentioned in your reflection too, it is tough)
• white text on purple tooltip would be more legible, but I guess that's plotly default, might be tough to change I'm not sure

Also a few suggestions for potential additional features (that don't require more data), if you have time for them:

• show the score that specifues how similar each of the top 5 colors are to that specified (makes comparisons more objective)
• set the sliders to the color of one of the listed foundations when it is clicked (Would allow one to answer the question "hey, that shade looks a lot like ours, how similar is it really?" without having to check one's own catalogue)
• ability to choose the X axis variable for the histograms (i.e. to Hue or Saturation)
• If you change your mind regarding filtering by country/brand, here's a suggestion to address the second issue you mentioned: if nothing is selected you could just have it be the same as having all countries selected

Final note on the README update component:

• Good description of app and useful gifs, but you should also include details for those wishing to develop your app (part 2)

Milestone 4 Todo List

• 1. Github issues: TA's feedback & Peer feedback (Elina)

• 2. Playing around with histograms: overlaying historgrams, density, & outline aesthetic (Ela)

• 3. reflection-milestone4.md (Ela, Rachel)

• 4. Docstrings (Ela, Elina, Lu)

• 5. canvas-submission.html: Release & Auto-deployed Heroku PR (Rachel)

Link to the milestone 4 requirement:
https://github.ubc.ca/MDS-2020-21/DSCI_532_viz-2_students/blob/master/release/milestone4/milestone4.md

Created PR for new CONTRIBUTING.md file.

Please review and merge PR for new CONTRIBUTING.md file. Thank you!

Milestone 2 Todo List

Repo:

• 1. Files & folders organization (e.g. Proposal.md -> doc/, Proposal.Rmd -> reports/)

project/
├── data/            .csv .hdf .pkl .feather
│   ├── processed/
│   └── raw/
├── src/             .py .R
├── reports/         .ipynb .Rmd
├── doc/             .md
├── environment.yaml (or/and requirements.txt)
├── README.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
└── LICENSE.md

• 2. app.py (in root)
• 3. requirements.txt (in root)
• 4. reflection-milestone2.md (in doc/)

README (README.md)

• 5. link to our deployed dashboard on Heroku (must)
• (6.) improvement (optional)

Canvas Submission

• 7. canvas-submission.html (Release)

Link to the milestone 2 requirement:
https://github.ubc.ca/MDS-2020-21/DSCI_532_viz-2_students/blob/master/release/milestone2/milestone2.md

Project proposal

Reference to the milestone template: https://github.ubc.ca/MDS-2020-21/DSCI_532_viz-2_students/blob/master/release/milestone1/milestone1.md

Briefly explain your idea here for brainstorming:

1. Motivation and purpose:
2. Description of the dataset with the dataset link:
3. Research questions you want to explore:

Milestone 1 Todo List

Repo Setup:

• 1. Make Github Repo
• 2. File organizations
• 3. Team Contract (root directory, team-contract.md)
• 4. Code of Conduct (root directory, CODE_OF_CONDUCT.md)
• 5. Contribution guidelines (root directory, CONTRIBUTING.md)

Proposal (proposal.md)

• 6.0. Section 0: Proposal discussion
• 6.1. Section 1: Motivation & Purpose
• 6.2. Section 2: Description of the data
• 6.3. Section 3: Research Questions & usage scenarios

README

• 7. Description of app & sketch (README.md)

Link to the milestone 1 requirement: https://github.ubc.ca/MDS-2020-21/DSCI_532_viz-2_students/blob/master/release/milestone1/milestone1.md

Peer Feedback

Hey group-2,
Congratulations on completing milestone1! I’m sure Beth would really like your dashboard. Here are a few thoughts from group-1:

What we really liked:

• We think you’ve a really novel concept and your pitch is great. The persona fits nicely with your theme and the country-wise trends promote inclusivity.
• We really like the color cards for the different brands.
• It is also interesting to see the different foundation shades as per best selling brands for different countries.

Some food for thought:

• Perhaps you could try using a different color palette for the second chart on the right to keep it distinct from the left chart.
• Maybe you can consider expanding the tool-tip of your right chart to also include the mean/median lightness per each brand.
• If I were Beth, I would like to know how am I performing in comparison to my competitor brands. The stacked historgams are good but maybe another visualization (violin/boxplot/facet) summarizing comparative performance of brands (where the user has the option to select and compare brands through a widget) might help inform Beth if she should be focusing on selling specific shades, how the brands are performing across countries etc.

All the best!

Milestone 1 Meeting Minutes & Action Items

Please see all Milestone 1 Group Meeting Minutes commented below.