Giter Club home page Giter Club logo

website's Introduction

As of March 7, 2021 we are no longer collecting new dataLearn about available federal data.


COVID Tracking Project

The COVID Tracking Project collects information from 50 U.S. states, the District of Columbia, and 5 other U.S. territories to provide the most comprehensive testing data we can collect for the novel coronavirus, SARS-CoV-2.

This repository is for the project's website: https://covidtracking.com/.

History

A full write-up on the history of the website is availble in the HISTORY.md file.

Documentation

Additional documentation can be found at our documentation and Storybook website.

Development

The website is built on GatsbyJS. If you are not familiar with Gatsby, we suggest checking out their excellent documentation.

Install

First, you'll need the Gatsby command line interface installed globally:

npm install -g gatsby-cli

Then, install all dependencies by running:

yarn install

The website is built from two separate data sources: our own API for COVID data, and Contentful for content. To download the most recent COVID data and setup a .env file with a copy of read-only API keys to Contentful, run:

yarn setup

You can also run yarn setup:api-repo if you just want to download data and not touch the .env file.

To run the website locally, use:

yarn develop

The project takes 8-10 minutes to build.

The site is now running at http://localhost:8000. Any changes you make to code is live-updated. There is a GraphQL preview tool available at http://localhost:8000/___graphql to see what data is exposed to the website.

Note that any changes you make while running Gatsby will automatically checked with ESLint, so check your console as you save files.

Organization

Components live in src/components and are organized as follows:

  • /charts - Visualizations
  • /common - Components that are used more than once and those that are used across different parts of the website
  • /layout - Components that control the layout of the website (i.e. headers and footers)
  • /pages - Components that are only used once or have a defined scope to a particular part of the website (i.e. StateGrade has to do with states) belong in their respective directory in /pages
  • /utils - Utilities. (If a particular component doesn't have any associated styles, there's a good chance it's a utility.)

Testing

We use Jest for automated testing, and all test files for Gatsby are located in ./src/__tests__. Test files are structured following their related components. To run tests, use yarn test.

When you make a change to an interface, you will need to update the Jest snapshot for tests to complete successfully:

yarn test:update

Before pushing your local branch to the repository, make sure to run yarn test:dev. This will make sure the project is linted and all tests pass. Make sure that every test passes. Pull requests are automatically checked against these same tests.

Storybook

View our Storybook

All common components throughout the site are documented in Storybook. You can find all our component stories in /src/stories.

To preview the storybook locally, just run:

yarn storybook

The storybook is now available at http://localhost:6006.

How to contribute

No matter how you choose to help, we would love to have you as part of the project. Check our Contributing Guide for information on how to file issues and make pull requests.

website's People

Contributors

aaronmullan avatar amandafrench avatar beep avatar bhays avatar codywall avatar dependabot-preview[bot] avatar duynguyen158 avatar friej715 avatar github-actions[bot] avatar goldfarb avatar goleary avatar jasnamrb avatar jasonlcrane avatar jeremiak avatar kevee avatar kissane avatar melbee avatar melvin-viana avatar muamichali avatar nselikoff avatar olivierlacan avatar realfuture avatar scandycuz avatar schwartzadev avatar superbiche avatar tealtan avatar tiagofsanchez avatar vijaysharwar avatar webmasterkai avatar wilto avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

website's Issues

"See also" links?

For commonly confused domains (covidtracker, coronatracker?), it might be worth having a banner of the form
"for the global arcgis visualization, see plague.com."

Perhaps this can be merged w/ other discussions of how to link out to existing visualizations, since most of these are quasi-relatime visuals with their own data sources

site design iteration 3/19

Hiya let's knock out some fixes. I got this from Júlia Ledur:

Website suggestions:

  • Don’t think the headers should be underline as they are already bold and colored (“Home”, “US Daily” and “States”). I would probably keep them black too.
  • The COVID Tracking Project in the nav bar should be bigger. Right now the hierarchy is a bit odd. Also the COVID Tracking Project logo should be somewhere in the nav bar at the top Agreed but moved to next week's design refresh.
  • Putting “Best Practices for Data Release” before the press section makes more sense to me?
  • I feel like we’re missing a “download data” button at the top of the “most recent data” page. That would then take the reader to the “Initial basic API & csv downloads” page added text links for now, moving button to the NEXT list
  • We should standardize the abbreviation for United States to U.S. (AP style) across the website and graphics. Right now, we have both "US" and "U.S." in the first sentence of the homepage other way around sorry, we're stuck with it for now

Sort/filter for state pages

I would love to see a feature to jump to a particular state from the /states/ page. I've used chosen before, which allows for both entering text to search and for choosing from a dropdown.

Something similar would be great. I'm curious to hear others' thoughts.

Design updates for mobile

I've noticed a few rough edges when viewing the website on my iPhone.

Home

  • "US Historical Data" and "Most Recent Data" in the header wrap onto two lines.
  • The "In the press" logos stretch the width but the list below wraps much earlier, causing the logos to have a big overhang.
  • Footer links stack vertically quite a bit. Maybe fine but looks a bit odd.

Most recent data

  • "Pos + neg" title in US totals table wraps
  • Below each state the "Grade - Last updated - Last checked" display wraps. Maybe stack?

I'll stop here but when we have resources this could use a pass.

PR conflict help requested

Hello! This great PR from @jeremiak slid by me and I only just saw it. @beep has since made a bunch of great CSS changes and we've changed the homepage text. Could one of you wonderful humans merge master in and update the PR to fix conflicts before we merge the PR?

THANKS, SORRY, SO MANY THINGS.

Individual State Pages

Maybe we could have individual state pages that each have the daily history for the state? Might also be good to include links to the screenshots taken of the individual state websites.

Flexbox collapses with empty values

This should be a simple fix -- just need to go into the template and add whitespace values as defaults when the table values are missing.

Alternatively, this could be solved with flex-grow.

image

/about-team refactoring

This page has two functions: teaching about the history of the project and giving attribution to contributors.

I propose a minor bit of refactoring.

The first paragraph in "current status" should move into "history" and get a little touching up on the text.

The "current status" section should be renamed "contributors."

Many pages are missing top-level subtitles

For a page like https://covidtracking.com/data/, there is a page title in the content, like "Most Recent Data", but not at the window level. In HTML the window title is the element html.head.title.

For example, the window-level title for that "Most Recent Data" page is the same as for every other page on the site: "The COVID Tracking Project":

Screen Shot 2020-03-20 at 12 29 00

What it should be is "The COVID Tracking Project - Most Recent Data"

Contributing Page

It would be great to have some words on how a person or small team can contribute to the project.

Some ideas

  • How to help collect/record data.
  • How to help with website/graphics.
  • How to bug public officials to improve/increase reporting of data and boost quality.

Usability audit/fixing, page by page

We've patchworked up a pretty solid set of items on this site, but after I finish adding some quick documentation this morning, we definitely need to go through and do some usability and feature design stuff. This is the GH home for that.

Switch to standard bullet alignment

I know we've talked about this for the next design pass but our data guys are extremely brain-itchy about it. @beep could you take a look at this when next you pass by and LMK if it's quick enough to just do?

Header anchors to link to specific section

I found myself wanting to link people to the Best Practices doc from the homepage and since the page overflows the default viewport height on most screens I realized it wasn't easy to link to a specific section based on a header anchor link (which I find extremely useful).

Example:

-<h2>Best Practices for Data Release</h2>
+<h2 id="best-practices-for-data-release">Best Practices for Data Release</h2>

Then anyone can easily link to https://covidtracking.com/#best-practices-for-data-release and get straight to the relevant section. We can also style the headers to display a symbol next the header when hovered so these permalinks are discoverable.

I have a proof of concept that simply adds markdown-it-anchor and replaces the default 11ty Markdown generator so that we can add that plugin and process all headers with it (it adds an anchor wrapping header tags and we can customize which header levels get it).

I'll post the PR in a bit for discussion if we think this is useful.

data for cases by counties available?

Is data for cases by counties in US available?

I am looking for data for Riverside counties at CA. I can manually read from their announce website, but just wondering if there are any existed data source?

Thanks!

"States" Refactor to "States and Territories"

This should be pretty simple: the Project currently always refers to states and territories as simply "states"

For example, on the /us-daily/ page, the table indicates that 56 states are tracked while this includes N. Mariana Islands, Guam, Washington D.C., and others:
image

I'm not sure how many instances there are where we use this phrasing, but I think it should be revised.

Investigate site build tool

As the very important work of #59 continues, along with PRs that include client-side code like #100, it's clear that we need a plan for the technical backend of the site. This is an issue to discuss options for either refactoring the existing Eleventy site, or move to another tool.

Technical requirements

  • Accessible - People with a wide variety of technologies (mobile, slow connections) and abilities should have fast access to information.
  • Available without Javascript - Client-side code should not be required to access critical information
  • Client-side code management - Client-side code should be compiled to support external packages and modules.
  • Easily documented - Comes with a clear set of coding and style guides.
  • Editable - Static should be easily editable with Markdown.
  • Data integration - Easily integrates with existing APIs.
  • Static - A static site with no backend to manage/go down.
  • Developer experience - Uses technology that is widely available, and has low barriers to entry.

Options

  • Refactor on Eleventy
  • Move to Gatsby
  • Move to another site generator

Provide simple visualizations, link to existing ones in the meantime

Thanks for this project!

Adding visualizations and the ability to query and drill down into the data would be very handy. E.g. I'd love to see a time series plot of the daily data for just one state or one outcome (positive or death or whatever).

Until that is available, thanks for linking via Twitter to one visualization website for this data:

That one is great because it shows barcharts of data over time per state. That site is:

I've seen the URL fail a few times with a warning from Tableau, but if it remains stable, you might want to list it from the website.

For comparison, I also note some other visualizations, which as far as I've seen don't provide the ability to drill down to a region and see a time series for just that area:

Sort shortcut state abbreviations alphabetically

I think the abbreviations should be sorted alphabetically based on the abbreviation, not on the full state name. For a minute I thought Nevada was missing but then I realized NV was sorting before NH.

DE93ECB8-BF50-4FE6-86C2-0E0C335BF1BF

Fix missing icons for mobile

image

I'd focus on the icons first, the rest we can probably tackle later.

Here they are:

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/_assets/img/icon-152.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/_assets/img/icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/_assets/img/icon-120.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/_assets/img/icon-114.png">

Double border on tables

This was my doing and should be the literal last priority.


The horizontal top and bottom borders are half as thick as the vertical ones. They should be twice as thick as they are now. (They should match the thickness of the vertical right and left borders.)

image

Here's a close-up:

image

The top and bottom borders should be just as thick the rest of the table.

A fun game of hide-and-go-seek in CSS if anyone is up for it :)

Add hospitalized values to website tables

We now track this value in the sheet for States and US current, and will add it to States and US daily after the 4 pm push today. We should expose this value on our website and in our API!

Add visualization gallery

Could include things like Willem’s dope Tableau dashboard and graphics that use our data like this one:

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.