adamouization / corona-virus-insights-dashboard

Coronavirus dashboard visualisations entirely designed in D3.JS

Coronavirus Insights Dashboard

This website aims to provide insights into the 2019 Novel Coronavirus COVID-19 by visualising the Johns Hopkins University Centre for Systems Science and Engineering through the D3.js library. It was developed in the context of a practical for our Information Visualisation module, requiring us to visualise any dataset in D3.JS.

You can visit the website here: corona-virus-insights.fly.dev

Screenshots

Usage

Clone the project, cd into the directory and run the following command:

npm install && npm start

Visit the local web app on the chosen port (3000 by default) at http://127.0.0.1:3000/

License

• see LICENSE file.

corona-virus-insights-dashboard's Issues

Quick lollipop chart improvements

• Make circles bigger (Malak recommendation)
• Rename "total" to "cases". Total can be misleading.
• Add a small label indicating the number (will also diminish unused white space in the chart - Malak recommendation)
• Uppercase the y-axis labels

Map Interactivity

Map should trigger events and update adjacent charts

Layout & Theme

Organise the different visualisations layout and add a theme.

Standardise numbers by percapita

Map view

Create a basic extendible map of the world

Final polishing

• Change the colour of the total number of confirmed cases card
• Create new icon for date filter (place it next to country filter)
• Add open-ended question to the modal
• Download a local version of the 4 CSV files (in case they are removed online)
• Rename Confirmed cases today card to Confirmed cases on XX/XX/XX
• Increase margin in total line chart
• Fix search bar reloading the page when enter is clicked
• Fix map legend size (see screenshot below) - option is to remove the decimals to take up less space
• Add tooltips in the line charts
• Fix date bug

Fix map bug (countries missing)

China and Australia missing:

Chart automatic scaling

For now, widths for the SVG elements holding the charts are hardcoded: tried to dynamically adapt to screen size by using document.getElementById("id");, but the DOM has not loaded at this point in the node js code.

--> Find an alternative or get document.getElementById("id"); to work.

This will make website fully mobile friendly (Currently, everything is mobile friendly, the cards move accordingly to screen size, but the charts in the cards don't adapt)

Upgrade line chart

• Add lines for recoveries and for deaths on the same chart

No longer considered: "Add shading under lines to turn it into an Area chart"

Data model

Create a js data model

Quick map improvements to make

• Move map-specific functions away from main.js to map.js (getGeoJsonFromCases and standardiseGeoJson functions)
• In the map tooltip, multiply the "infections per 1000" by 1000 and round to 2 or 3 decimals and add a "per thousand symbol" (like % but with three circles)
• Remove cases/recoveries/deaths info from the tooltip, the lollipop chart should show this instead.
• Fix map legend duplication (see image below)