Giter Club home page Giter Club logo

happy-dash's Introduction

happy-dash

An interactive exploration of the data from the World Happiness Report for 2015 - 2019.

Heroku app here.

Research question:

How have overall happiness and factors that contribute to overall happiness changed on a global level and on national levels over time?

Demo

demo_gif

Description of Dashboard Design

This dashboard's purpose is to enable comparing happiness across multiple countries over time. The dashboard is divided into two main screens: a summary view and a detailed view. Both screens have some aspects in common: they both contain a menu that allow the user of the dashboard to select the features they want to analyze as well as the countries they want to compare. For both screens the majority of the screen displays visuals and the user is able to select the year range for the visuals as well as contributing factors and countries.

Detailed View

Detailed View

In the detailed view, the user is able to select all features and any desired countries. On the visual section, they are shown up to 8 line charts. The first and central one will display happiness scores over time by country. The other line charts are charts of the individual features and appear below the central chart. There will be a legend displaying the country or continent names as well as the corresponding colours for each.

Summary View

Summary View

In the summary view, in the menu the user can select all or a certain number of features. This also applies to countries. In the visual section there is two charts, one summary chloropleth of the world and one stacked bar chart by country. The map can be animated over the time range selected to visually see patterns by large areas. The stacked bar chart averages all components of a country's happiness score to give an idea of relative contribution over the time range selected.

Running Locally:

To run this app locally and modify it - first clone this repo:

$ git clone https://github.com/UBC-MDS/happy-dash.git

Setup a conda env for it, and activate it using the following commands from the root of the project on your computer:

$ conda env create
$ conda activate happydash

Finally, run the app with:

$ python src/app.py

happy-dash's People

Contributors

aidanmattrick avatar dbandrews avatar kshahnazari1998 avatar

Watchers

 avatar

Forkers

kshahnazari1998

happy-dash's Issues

Milestone 3 Feedback

Marking:
-1 Interactive Dash app with R and ggplotly: Visualizations (Ploty controls need to be fixed)
-0.5 Interactive Dash app with R and ggplotly: Quality (Same types of plots)

Suggestions:
Great job at implementing the app on R. The deployed app on Heroku looks very neat. I like the consistency that you guys have between the python and r deployment. As mentioned for milestone 2 feedback, it would be wise to have other types of graphs to represent the countries for example, such as a country figure to pick which country’s data is displayed etc. Lastly the ploty controls are on top of the titles of your figures and should be fixed with spacing.

Peer Feedback from Group 9

Hello group 10,

Great Job! We (Jacob, Santiago, Yuyan from group 9) all enjoy reviewing your World Happiness Report Explorer app. It is very organized and informative. If I were a policy analyst working for the government, I will find the app is super useful for helping me identify how happiness scores change over time for our country while comparing with the rest of the world. If I saw a country had a much better performance than our county, I can even explore which factors make such difference(e.g. GDP, family, life expectancy). In this way, I think it can point me to right direction for my further research and even future advocacy.

What we like:

  • As I mentioned, we like the overall layout of your app. Everything is so clear and organized. The structure of the dashboard allow us to easily and quickly understand the app.
  • We also like the way that the drop-downs and sliders interact with the plots. As I select more features, more plots will show up! So cool!
  • The overall plot types are very efficient! We can always easily compare the happiness score over time for two countries. The line plots are very suitable and in line with the purpose of the app.
  • The app takes just one screen, we like it as there is no scrolling needed.

What we suggest: (we might be wrong)

  • We found that there are so many options in the countries, we like it. But we would suggest to add another filter, such as continent. For the purpose of this dashboard, if I really want to compare one county with some other countries together(as benchmark), then I cannot do that. All I can do is select them one by one and then drop them one by one. Also I select more than 5 countries, the app becomes overwhelming quickly.
  • We also noticed that for the contribution plots, there is no y-axis scales for the plots on the right hand side. Initially, I assume they have the same scale as the plots on the left. But after careful comparison, I do not think this is how it works, at least from an audience perspective. Because the white grid lines are not aligned. Maybe it worth to add the scales of the y-axis for all plots to avoid confusion.
  • I am using the mac laptop with full screen. I found out that if I select all the contribution plots, the titles and the axes of those plots will all overlap together. Maybe it's because there are so many plots on the same screen. Maybe try to combine two relatively unimportant factor together.
  • Maybe add a card or some other plot types in the app. Currently they are all line charts.(But still very clear!)

Overall, we think your group did a amazing job in designing the dashboard! Hope our suggestions can help in your Milestone4. Have a great weekend!

Milestone 2 Feedback

Marking:
-0.5 Interactive Dash app in Python and Altair: Quality. The plots can be displayed differently.

Suggestions:
Great job! It looks very clean, and I like that you guys used Ploty. One minor flaw that Ploty might have is the ability for individuals to click away at the graph and completely miss the years that the data is recorded/displayed. Great use of space! The data displayed is very informative, and it’s clear to see that you guys put thought in what data to show. One of my biggest suggestions would be to remember that there can be other ways to display the data, and I believe is it a criterion to use more than 1 type of graph for the final product. In addition to this, to add to the complexity, I would suggest that instead of drop-down bar, it would be wise to in-cooperate something like a global map in which when a country is clicked, it’s data could be shown on the graphs. Great job on the first attempt! Have a great week!

Milestone 4 Feedback

Marking:
-1 Tie it all together and deliver a production ready app: Visualizations Spacing
Suggestions:

Amazing, Great Final Work! Give yourselves a pat on the back. Some minor alignment issues. The right white space seems larger than the left side. Great job at finishing DSCI 532!

Milestone 1 Feedback

Marking
-1 missing research questions Section 3: Research questions and usage scenarios: Writing
-1 missing research questions Section 3: Research questions and usage scenarios: Reasoning

Suggestions: Overall it looks great! As we previously discussed maybe it’s a good idea to just to implement one tab for milestone 2. Even for Milestone 3 and 4 your group might need to simplify a bit, but you put some recursive code for all the line graphs. I really like that all the filters and buttons are on the left side. I don’t know what the colors would look like, but make sure they are aesthetically pleasing. Another cool idea would be to add the geography of the world, and have the numbers fit inside each country. Please add research questions in the next iteration of the proposal.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.