Stats Page Revamp Stage 2

[kengoy]

UI Spec: https://www.figma.com/file/iUS5LdAnuTKVei88QwPPCH/Bay-Area-Pandemic-Dashboard-(PanDa)-by-Bay-Area-Brigades?node-id=1286%3A5448

Sub Dev Tasks

• Add a UI component for "Select Counties to Compare"
• Add buttons for 9 counties
• Assign a nice color for each country for selectetd status.
• Add a UI component for the line chart
• Prepare data(or calculate from existing data) for cases per 1000 people
• Prepare data(or calculate from existing data) for Percent Increase in 7 Days

TBD Support "Bay Area Average" "California Average" "National Average" as there is no data available in the data scraper we use.

[kengoy]

• [DONE] Add a UI component for "Select Counties to Compare"
• [DONE] Add buttons for 9 counties
• [DONE] Assign a nice color for each country for selected status.
• [DONE] Add a UI component for the line chart
• [DONE] Prepare data(or calculate from existing data) for cases per 1000 people
• [DONE] Prepare data(or calculate from existing data) for Percent Increase in 7 Days

[kengoy]

Thanks for reviewing @thuongho !

@nikobooth Phase 2 is "almost" ready! Can you please review if it is as you expect? https://panda.baybrigades.org/main

The remaining dev tasks are: "Bay Area Average" "California Average" "National Average"

I think we can show "Bay Area Average" line chart in default without placing the button. User can just select counties to compare with "Bay Area Average". "Bay Area Average" is one of the key data as we already show on the top and we do not need to let user to select or deselect in the comparison chart. Let me know your thoughts.

As for "California Average" "National Average", we need to find the additional data source to support this. Is it okay to lower priority of these two?

[kengoy]

@nikobooth

Oh, one important question I was about to ask is regarding the "Cases per 1,000 People" chart, did you mean it is for "Daily Cases per 1,000 People" or "Total(Cumulative) Cases per 1,000"?

Right now it is calculated as "Daily Cases per 1,000 People". DAILY CONFIRMED CASES / (COUNTY POPULATION / 1000)

If you meant it should be calculated as total cases (Cumulative Cases), I will change it accordingly.

[nikobooth]

This is looking excellent, here are my notes:

1. For cases per 1000, I think the best metric to show would be the 7 day average of new cases/1000 pop. The 7 day avg normalizes the curve and better shows trends. Per 1000 pop will again normalize for county size. To get this value for a given day, use: ([SUM OF DAILY CONFIRMED CASES OF PAST 7 DAYS]/7)/[COUNTY POPULATION]/1000 This metric also follows advice posted by Johns Hopkins and Financial Times data teams on how best to show infection rate based on case data. When we can, I think we should prioritize implementing the info tip or a data explanation somewhere as this might not be the most intuitive measure for people to understand. Additionally, please note smaller changes below: a) add '7 day rolling average' subtitle b) expand height of chart to increase legibility c) I'd like to make the hover state a little clearer, can we change the color to match whatever line is being hovered over or include the county name in the hover pop up?

2. For the Selector component, great job eliminating the dropdown menu, sorry I hadn't given you a proper new mockup for that. a) I think we can remove "county" from both the buttons and corresponding labels on the graphs. It takes up extra space (especially on mobile and on the graphs) and we're already telling the user to 'select a county'. b) @justinjiangrws had introduced some additional non purple colors to use when we are tagging county data. Let's check with him about those.

3. Lastly, I'm thinking that as our stats page expands thanks to your and @thuongho 's hard work, we might want to include section headers like "comparative graphs" and "demographic data" to help users orient themselves.

Overall, fantastic work!! We can discuss further tonight!