Giter Site home page Giter Site logo

ubc-mds / dsci_532_group_12 Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 5.0 6.09 MB

A dashboard visualizing Covid-19 statistics at both global and country scales using JHU CSSE COVID-19 Data

Home Page: https://covid-data-portal.herokuapp.com/

License: MIT License

Python 31.48% Jupyter Notebook 67.88% CSS 0.64%
time-series covid-19 johns-hopkins-csse plotly-dash python data-science map dropdown barplot lineplot

dsci_532_group_12's Introduction

COVID-19 Data Portal

About

The goal of this repository is providing COVID-19 statistics by using Dash and Python.

The COVID-19 Data Portal live dashboard can be accessed here.

Description

The COVID-19 Data Portal aims to provide the user with an interactive interface to check their number of cases in the world in a straightforward way. When opening the app, the total confirmed cases by region are shown in the center of the app in the form of a map. The user can choose to zoom in the map and check the detailed case information for a specific region. Furthermore, the trends for the number of daily confirmed cases are shown in the center of the app as well.

On the left side of the dashboard, the user can view the world cases trend for recovered cases, death cases, and confirmed cases. There's also an ordered ranking on the left side which shows how many cases up till now for each countries in different categories. The user can select the categories such as confirmed cases, death cases, recovered cases from the drop-down menu.

On the right side of the dashboard, the country level statistics can be seen in both number format and trend-line format. By default, the user will see Canada's statistics when opening the dashboard. Users can also opt for other region's statistics by selecting from the drop-down menu to view both the case summary and the trend line.

Dashboard

Build the dashboard locally

Step 1: Clone this repository

Step 2:

Create and activate a conda environment using the env.yaml at the root of this project by running the following command at the root directory of the project. (Alternatively, you can manually install the dependencies listed in the env.yaml file)

conda env create --file env.yaml
conda activate covid_dash

Go to the root folder of the repo and execute python src/python/app.py

License

  • The COVID-19 Data Portal materials here are licensed under the Creative Commons Attribution 2.5 Canada License (CC BY 2.5 CA). If re-using/re-mixing please provide attribution and link to this web page.

References

dsci_532_group_12's People

Contributors

lephanthuymai avatar rissangs avatar wang-rui avatar

Stargazers

 avatar

Watchers

 avatar  avatar

dsci_532_group_12's Issues

Update Github repo About session

"Please modify your GitHub repo description in the top right corner where it says ""About"" to include
A short description of your app (might already be there)
The link to your deployed dashboard (it is often useful to still keep this in the README as well)
A few keywords describing which plots, widgets, and interactions you have used in your dashboards, like I have done in my demo app.
If I have time during the break, I will use these to make a resource where you can easily find each others dashboards without searching through the public GitHub repos directly. I think this will be useful to reference back to for capstone and later. You can DM me on slack if your group does not want to be part of this for some reason."

Document your functions' functionality (Optional)

"You have all already written good docstring for your functions, right??? Well then, congrats! Your good habits have been awarded with free points in this lab. If not, this is your chance to remedy the situation. Write proper docstrings for all functions, including a description of what the function parameters do, as you have learnt in previous courses. Clear comments where needed in the code is also a plus.
"

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 color issues. On the global map, after you click a specific category you want displayed, the button does not grey out, but the first button is a different color, so it looks as though that category is still being displayed. Great job at finishing DSCI 532!

"Other panels: apply SI format for tooltips"

"Peer review: “The Total Cases and Recovered counts for individual
countries is using scientific notation for large numbers (for example, when
India is selected) which is a little difficult to read.”"

Peer feedback

Hi Group 12!

This is Rahul from group 11, please find below my feedback regarding the dashboard you created.

Things that I liked:-

  1. The overall dashboard is quite informative.
  2. The UI is easy to use and self-explanatory.

Thing that I felt could be improved:

  1. When I toggle between “Confirmed”,”Death” and “recovered” , the highlight seems to stay on the “confirmed” button even though the map changed, which confused me a little. I think this issue is there with all the tabs.

  2. The Total Cases and Recovered counts for individual countries is using scientific notation for large numbers (for example, when India is selected) which is a little difficult to read.

  3. Perhaps you could use different color schemes for ‘confirmed’ , ‘deaths’ and ‘recovered’ such as green for recovered, red for deaths and blue for confirmed.

Other than this, I think its a good dashboard. Please let me know if you need any clarifications regarding the above points. All the best!

Milestone 2 Feedback

Marking:
-2 Interactive Dash app in Python and Altair: Visualizations. Spacing and alignment of the graphs need work.

Suggestions:
Great job! I like the use of the global map to show covid deaths! I like the use of the formatted global bar graph that clearly shows the highest and lowest numbers in respect to the category.
There is a space in the middle bottom which I would suggest filling. In addition, for spacing, it seems as though it is a bit too stretched, and there is not enough space on the side. Some of the features and overlapped and should be re-scaled such as the countries tab on top of the world map. Following your suggested improvements alongside some design changes for spacing would be great for the next milestone! Have a great week!

Milestone 1 Feedback

Marking
Great job!

Suggestion:
Great job, I really like the design. I like the country layout that is the focus in the middle. I think that this is a good level of complexity, anymore would be too much. You can implement a simpler version without all the functionalities for milestone 2, and the rest for Milestone 3 and Milestone 4. All in all, great job, one of the best designs I’ve seen! Please add research questions in the next iteration of the proposal.

Update README file

Building from your research questions and usage scenarios, give a high-level description of the interface for the app you will build. Remember to be realistic about your expectations and plans since you will actually be implementing this app (but again, you will not be penalized if you need to adjust a bit in later milestones). It is better to design a slightly more limited app that you have time to implement well, instead of a complicated app that you don't have time to finish. At the same time, you cannot just make a single barchart and call it a day. The app needs to have a few plot panels, use the visualizations from previous students shown in lecture one as a guide as a complexity target for the final app.

In this description, you are not required to use terminology specific to Dash apps (i.e. widgets, components, etc…) or make reference to specific Python or R libraries. Your sketch can be hand-drawn or mocked up using a graphics editor. If you can show the app visual design & interaction design in a single image that is ideal, but if you need more space to show some other planned features of your app you can include max three images for this proposal.

The description should be about 200-300 words and live in the README.md file of your GitHub.com repository. The sketch should be linked in the README.md file of your GitHub.com repository underneath the high level description so that the image shows up on GitHub.

Example description

The app contains a landing page that shows the distribution (depending on data type, bar chart, density chart etc) of dataset factors (hypertension, physical disabilities etc.) colored coded according to whether patients showed up or didn't show up for an appointment. From a dropdown list, users can filter out variables from the distribution display, by patient demographics (i.e. only show female patients), by appointment data (i.e. if SMS was sent), and finally by the date range of appointments. A different dropdown menu will allow users to re-order variables according to the probability of patients being a no-show or in alphabetical order to comorbidities. Users can compare the distribution of co-morbidities by scrolling down through the app interface.

Milestone 3 Feedback

Marking:
-2 Interactive Dash app with R and ggplotly: Visualizations (Mapping and ploty controls need to be fixed)
-2 Interactive Dash app with R and ggplotly: Accuracy
-1 Interactive Dash app with R and ggplotly: Quality
-0.5 Give peer feedback to another group (Optional): Reasoning (short)

Suggestions:
Great job at implementing the app onto Dash and Plotly. The first thing I had noticed was that there were some issues with remapping the global cases figure and world map. The world map sems to be on top of the global cases. This should be fixed if R is what this group wants to use for milestone 4. This has already been mentioned in the milestone reflection, and I can see that. Some of the spacing issues on the side seem like they have been fixed. Lastly the ploty controls are on top of the titles of your figures and should be fixed with spacing for milestone 4.

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.