bruceallday/coronavirus-covid-19--tracker

COVID-19 data by country with interactive heat and choropleth map. React, Mapbox, various API's

❗ Track Coronavirus(COVID-19) v1.5.0

Run locally

Clone project
Navigate into the project
run yarn in the project directory to install all dependancies
yarn start to spin up a local server
View at localhost:1234/

Stack

• JS ES6
• React
• JSS
• Material-UI
• Parcel
• Node

Endpoints:

• Coronavirus(COVID-19) data - NovelCOVID/API
• Country codes - datahub.io/core/countryByGeo-list
• Country Flags - countryByGeoflags.io/
• Mapbox - mapbox.com
• Geo-Json-World - github.com/BPouncey/geo-json-world

Media Query Breakpoints

Device	Width	Height
Mobile	414	896
Tablet	768	1024
Desktop	1400	800

API Tutorial:

import React, { useState, useEffect } from 'react'

import { useStyles } from './totals.styles'

const Totals = () => {
    const classes = useStyles()
    const [data, setData] = useState([])
    const [isLoading, setLoading] = useState(false)

    useEffect(() => {
        getData()
    }, [])

    const getData = async () => {
        setLoading(true)

        const result = await fetch(`
            https://corona.lmao.ninja/all
        `)

        const data = await result.json()

        if (data.error) {
            console.log("error", data.error)
        } else {
            setData(data)
        }
        setLoading(false)
    }

    return (
        <div className={classes.root}>
            {!isLoading && (
                data.map((item, index) => {
                    <h3>{item.countryByGeo}</h3>
                    <p>{item.cases}</p>
                })
            )}
        </div>
    )
}

export default Totals

Features

🔍 Dynamic search engine

Making use of the React useState() hook to make an event based search engine.

🗺️ Data Driven Styling

Using my endpoint data, I create dynamic data driven styling to associated parameters, in my mapbox.com / Geo-Json / NovelCOVID/API) merged data to dynammically create a real-time data visualisation of COVID-19 cases around the world.

   const getData = async () => {
        setLoading(true)
        const result = await fetch(
            `https://bpouncey.github.io/geo-json-world/custom.geo.json`
        )
        const data = await result.json()

        if (data.error) {
            console.log(data.error)

        } else {
            data.features.map(country => {
                covidData.map(countryData => {
                    if (country.properties.iso_a3 === countryData.countryInfo.iso3) {

                        country.properties = {
                            ...countryData,
                            ...country.properties
                        }
                    }
                })
                if (!country.properties.cases) {
                    country.properties.cases = 0
                }
            })
            setState({ data: data })
        }
        setLoading(false)
    }

📈 Totals display

🔥 Heatmap

View a heatmap visual based on cases per region

❗ About

Due to the panic and fear in society I created this accesible application to provide correct infomation, on every countryByGeo where data has been recorded. Please also know, the data shown is recorded infomation, unrecorded infomation will not be shown.
Track Coronavirus(COVID-19) is an independently developed, free to use web application ✔️

Environment

• macOS catalina: 10.15.3
• VS Code: 1.39.1

Authors

• Bruce Pouncey - Initial work - BPouncey

License

(MIT)

Acknowledgments

@NovelCOVID