Giter VIP home page Giter VIP logo

adamouization / corona-virus-insights-dashboard Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 1.0 4.32 MB

Coronavirus dashboard visualisations entirely designed in D3.JS

Home Page: https://corona-virus-insights.fly.dev/

License: MIT License

HTML 2.48% JavaScript 21.13% CSS 17.15% Less 28.21% SCSS 31.03%
coronavirus coronavirus-analysis coronavirus-tracking covid-19 covid19 covid19-data d3 d3-visualization d3js d3v5 nodejs

corona-virus-insights-dashboard's Introduction

Adam Jaamour Profile Views badge Hits GitHub Followers GitHub Stars Earned

Typing SVG

trophy

About me

  • 🔭 I am an Applied Data Scientist at causaLens, on the path to revolutionise the world of AI by stepping away from traditional Correlation Machine Learning and focusing on causal AI. Previously, I worked as a Data Scientist at NewDay developing ML models for credit decisioning. I completed my Artificial Intelligence Master’s degree from the University of St Andrews, during which I earned the all-time top grade in the Machine Learning module with a 99% average and graduated with the Dean’s List Award. Before my Master’s, I graduated from the University of Bath with a First-Class Honours degree in Computer Science, which included a 13-month placement as a software engineer with the Formula 1 team Scuderia Toro Rosso (today known as Scuderia Alpha Tauri). I am also actively working on side projects, encompassing topics such as generative AI, video game development and web development.

  • 💬 Ask me about my background and experiences:

My Stack: Programming Languages, Frameworks & Tools I use

Programming Languages

Main

Python Java JavaScript HTML5 CSS3 Git Shell Script LaTeX Markdown

Past Experience

C Haskell

Frameworks

Data Science

Anaconda Keras TensorFlow PyTorch scikit-learn Pandas Matplotlib NumPy OpenCV

Web Development

Django DjangoREST FastAPI Flask Bootstrap Chart.js

IDEs

Jupyter Notebook Notepad++ PyCharm Sublime Text Visual Studio Code WebStorm IntelliJ IDEA

Other (OS, Hosting, DBs, SaaS, Design, Workflow)

Operating Systems

macOS Windows Linux Ubuntu Debian Fedora

Hosting/SaaS/Databases

Heroku Github Pages AWS Postgres CircleCI TravisCI

Design

Adobe Acrobat Reader Adobe Photoshop Aseprite

Workflow

Bitbucket Confluence Jira Notion Power Bi Prezi Trello

StackOverflow

StackOverflow StackExchange
Adam Jaamour's's SO profile profile for Adam Jaamour on Stack Exchange, a network of free, community-driven Q&A sites
user:5609328's SO ranking for python

Leetcode

Leetcode Stats

Find & Contact me

Linktree Linktree LinkedIn stackoverflow

corona-virus-insights-dashboard's People

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

alinapia

corona-virus-insights-dashboard's Issues

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)

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)

image

Map view

Create a basic extendible map of the world

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"

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

image

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

Layout & Theme

Organise the different visualisations layout and add a theme.

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.