Project Update: COVID-19 World Tracker

Last week I shared my project plan for building out a project while balancing homeschooling for my kids. Despite being computer-less for 3 days after an unfortunate coffee-on-laptop incident, I am continuing to work through my goal of learning D3 data visualization and incorporating my visualizations as components in a react application.

Weekly Update

This week's work focused on integrating D3.js into my existing react.js app. After a bit of research, I decided to use Leigh Steiner's approach described in her article React + D3 : The Macaroni and Cheese of the Data Visualization World. Aside from the amazing title, I appreciated the simplicity of her approach, which was to completely separate the concerns of React and D3 apart from one another so that each could interact with the DOM independently and without interference. Following this structure, I organized my react components around user interactions, as well as fetching and parsing the COVID-19 data, and kept my data visualization work confined to one file (Draw.js).

The basic flow of data entails a user choosing countries from a dropdown menu (CountryDropdown.js), which renders and passes props to a collection container (Collection.js), which renders a collection of individual country components (Country.js).

const Country = (props) => {

  // Code to parse data into correct format for D3

    return (
        <Viz countryName={countryName} totalCases={totalCases()} dailyData={parseData(dailyData, array)}/>
    )
}

export default Country

This component is responsible for parsing the fetched data into a format that will be used by D3, and renders a Viz component (Viz.js).

const Viz = (props) => {

    useEffect( () => {
        Draw(props.countryName, props.totalCases, props.dailyData)
    }, [props])

    return <div className="viz"></div>
}

export default Viz

The sole purpose of the Viz component is to call the Draw() function, which ultimately will render the data visualization. However, it also needs to render an empty div that D3 will use as a node to attach the data visualization to.

Finally, with the .viz node available, we can write and execute the Draw() function to render the data visualizations. While there is more to be done in terms of formatting, I now have dynamically-generated bar charts showing COVID-19 data from any country (or any collection of countries) chosen by the user. You can view my D3 code-in-progress here.

Next Steps

This coming week, I hope to explore and add the following features:

1. Continue styling and formatting the chart
2. Make the user interface and charts more responsive
3. Add conditional logic to account for countries with 0 cases
4. Add stacked bars to show all data (total, recovered, active, deaths)
5. Use Bootstrap styling to create cards to build a dashboard of charts
6. Add a map visualization to the home page
7. And eventually...Add a show page for each country, with multiple data visualizations

Resources

I've used a ton of excellent resources to learn D3 from scratch, and I recommend the following if you're interested in creating a similar data visualization project:

1. Free Code Camp Data Visualization Certification Course
2. Curran Kelleher's 13-hour Data Visualization with D3.js - Full Tutorial Course
3. React + D3 : The Macaroni and Cheese of the Data Visualization World
4. D3 documentation
5. CoronaVirus Covid19 API
6. Using d3-tip to add tooltips to a d3 bar chart
7. D3-tip documentation
8. D3 Chart Examples on Observable