google-research / vaccination-search-insights

A dashboard that visualizes publicly released Google Vaccination Search data.

Vaccination Search Insights

This project provides an reference visualization for the Google Vaccination Search Insights data set.

This is not an official Google product.

Keep reading or download the data directly.

About this data

You can use this data to compare search interest between topics related to COVID-19 vaccination. The value for search interest isn’t an absolute number of searches—it’s a value representing relative interest which we scale to make it easier to compare regions with one another, or the same region over time. If you’d like to know more about our calculation and process, see our technical docs.

How to best use this data

We used the same normalization and scaling everywhere so that you can make these comparisons:

• Compare a region with others to see where you might focus effort.
• Compare a region over time to see how your community’s information needs have changed or see the impact of your communication efforts and news events.

Remember, the data shows people’s interest—not opinions or actual events. You can’t conclude that a community is suffering from many side effects because there’s increased interest in the safety and side effects category.

Protecting privacy We developed the Vaccine Search Insights to be helpful while adhering to our stringent privacy protocols for search data. No individual search queries or other personally identifiable information are made available at any point. For this data, we use differential privacy, which adds artificial noise to our data while enabling high quality results without identifying any individual person.

Availability and updates

To download or use the data or insights, you must agree to the Google Terms of Service.

We’ll update the data each week. You can check the dates in the charts to see the most recent day in the data. If you download the CSV, remember to get an updated version each week.

We'll continue to update this product while public health experts find it useful in their COVID-19 vaccination efforts. Our published data will remain publicly available to support long-term research and evaluation.

Query the dataset

Get real-time insights using Google Cloud’s BigQuery. Analyse with SQL or call APIs from your code.

Bigquery public dataset

Analyze with covariates

Analyze the data alongside other covariates in the COVID-19 Open Data Repository.

Tell us about your project

We’d love to hear more about how you’re using Vaccination Search Insights. If you’ve solved problems, we’d like to help you share your solutions.

[email protected]

Dashboard development

Getting started

This project should build in most posix-like enviroments. Besides npm, it has small dependencies on make and wget.

Install the dependencies...

npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Development process and releasing

All changes require a PR. Normal feature PRs are merged into dev. When it's time for a release:

Install https://github.com/release-it/release-it

$ npm install -g release-it

Then create the release branch from dev and push it as a new PR. Say you want to release version 1.2.3

$ git checkout dev
$ git pull --all
$ git checkout -b release-v1.2.3 origin/dev
$ git push -u origin release-v1.2.3
$ release-it 1.2.3

Then create the PR and make sure that the PR will merge into main. If there are any issues found during release testing, they can be made directly on the release branch or cherry-picked from dev.

Afterwards there should be a sync PR from main back into dev (like #93).

Deployment

.github/gh-pages.yml defines a process publishes build output to a special branch called gh-pages, whenever there is a new push (e.g. PR merging) on the main branch. This workflow can also be manually triggered, which may be handy to include a new version of the data set.

vaccination-search-insights's Issues

Weeks should be Mon-Sun and not Mon-Mon.

Currently weeks are displayed as date - date + 7, when it should date+6. For example "Jun 14 - Jun 21, 2021" should be "Jun 14 - Jun 20, 2021"

Cannot select state from dropdown.

Stacktrace:
Uncaught (in promise) TypeError: Cannot read property 'data' of null
at Selection$1.selection_datum [as datum] (datum.js:4)
at activateSelectedState (choropleth.js:340)
at setSelectedState (choropleth.js:65)
at onChangeHandler (TrendsOverview.svelte:589)
at onSelectedItemChanged (SimpleAutocomplete.svelte:141)
at Object.$$self.$$.update (SimpleAutocomplete.svelte:144)
at update (index.mjs:760)
at flush (index.mjs:732)

Update how missing data appears in the chart hover card.

Here is the spec:

Mobile map date selector

Related to #31.

On mobile the date selector is completely clipped:

It should instead flow before the map chart legend.

Update Next Step svg's with actual icons

There are currently two place holder svgs in the TrendsOverview.svelte file for icon images that we are waiting on. When the icons are available, be sure to replace this two svgs with the appropriate images.

Show country level roll-up by default

The time-series charts should never be empty. If there is no location selected, e.g. at first load, then we should display the country level roll-up.

Adjust positioning of y-axis label.

Map should show which date the data is from.

Until we add the date selector to the choropleth map, we should at least display which date is being shown.

Census Bureau attribution text below choropleth

Add small print under the choropleth that says "Chart includes geographic data from US Census Bureau". See typography in figma

Mobile trend axis text too small

When the trend chart is scaled, the text is currently scaled with it, leading to unreable text at small widths:

Choropleth hovercards - Don't show "Click to drill down" in zipcode hovercards

Since there's nowhere further to drill down to, don't show "Click to drill down" when hovering over zip codes subregions.

Dropdown does not display options when navigating to URL with place ID populated.

Cannot view or select options from dropdown.

Stacktrace:
Uncaught (in promise) TypeError: Cannot read property 'select' of undefined
at activateSelectedState (choropleth.js:314)
at setSelectedState (choropleth.js:65)
at onChangeHandler (TrendsOverview.svelte:589)
at onSelectedItemChanged (SimpleAutocomplete.svelte:141)
at Object.$$self.$$.update (SimpleAutocomplete.svelte:144)
at update (index.mjs:760)
at flush (index.mjs:732)

Add date selection to the choropleth map

The user should be navigate through available dates to display geo data for that date.

Implement dev branch and release process

Once we are ready for public launch, we should make a 1.0 version and move all development to a dev branch such that any changes to the main branch go through a controlled release process.

Mobile trend chart info popup

The info popup on the trend charts on mobile is completely clipped:

Add ZCTA shapefiles to the map

Visualizing zip codes when focused at the county level will offer a ton of insights.

Fix Mobile layout issues

The current site doesn't work very well on mobile devices:

We should fix responsive flows to common mobile device sizes.

Implement hierarchical location chooser

Locations should be arranged in a geo level hierarchy. It should be easy to choose nation and state levels by navigating the drop-down in addition to being able to find by typing.

Spec:

Prototype:

Add Document description

I'm reviewing chrome lighthouse results, and it pointed out that we lack a document description. Since this controls how this will be shown in search results, we should put together copy.

See also: https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets

Data download UI

Update visual design for download link and include an interstitial rich tooltip with terms of service language. See figma mockup

Time series hovercard behavior

Hovercard should not disappear or flicker as long as mouse is over chart. Ideally, hovercard's content and position change depending on the nearest date tick wherever the cursor may be. Users can move cursor across chart and compare changing values in a relatively stable view (except for card's shifting horizontal position). Hovercard disappears when mouse rolls out of chart. See prototype behavior

keep hovercard values a fixed distance from the right edge

For larger widths when the hover card appears overlaid on the chart, the hover card width is not fixed and the selected, high, and low values appear a fixed distance from the right edge of the hover card.

This is very minor, for a later release I can adjust the styling so even for fixed-width hover cards above/below the chart, the values appear a fixed distance from the right edge of the hover card.

Originally posted by @artipatankar in #58 (comment)

Recalculate color domains based on the selected region.

Currently the color domain is calculated nationwide, this leads to local areas of saturation:

If we instead calculate the domain based on smaller regions around the selected region, it should address this issue.

Regions CSV doesn't have `place_id`

The new makefile process for generating regions.csv doesn't include place_id. Since this is a key for lookups, we should re-add this.

Fix setSelectedState interface to use region code instead of FIPS code

The onChangeHandler routine in TrendsOverview.svelte is calling setSelectedState with a sub_region_1 _code value, which is something like "US-AK" while the routine is expecting a FIPS code.

Update the setSelectedState to take the sub_region_1_code values and internally translate into a FIPS code.

Choropleth hovercard behavior

Hovercard should not block mouse events so that users can move cursor quickly and easily to see values in adjacent subregions and compare. Ideally, hovercard does not appear until mouse stops moving for brief period (~300ms) and disappears when mouse moves again. See prototype behavior

Wonkiness in region selection

While implementing #121, I noticed there appears to be some wonkiness in region selection where some clicks in other regions are invoking a region change. To replicate

• Open Warren County, New Jersey (http://localhost:5000/?placeId=ChIJBT-KStmCw4kRT-qWiF6ja1Q)
• Click to the left on Pennsylvania, around Northampton county
• Try to click on Warren County NJ again

Update to public data URL

When available update the data sets to the public data URLs.

Links to and new copy for README.md

We should link to this github repo and rework README.md.

Refactor Query Type Selector Chip Bar

Issue: Duplicate Code
Currently, there is query type selector chip bar created for the map at the top of the page. More specifically, it is under the class "map-trend-selector-group" in TrendsOverview.svelte. The same bar will be used for the TopQueries feature below the trend lines that will be used to change the data displayed in that component.

Everything style wise will be the same for these two chip bars. The only difference between these two chip bars is the onClick function.

What We Can Do to Fix:
One idea to avoid redundancy in the repo is to create a separate component for this chip bar and reuse this component in different sections of TrendsOverview.svelte and allow for the onClick function to be a parameter of the component. That way, we can handle the click of one of the chip buttons differently depending on which section/what data the bar corresponds to.

Screenshots for Reference:
Query Type Selector Chip Bar that is currently used for the map and in production:

Query Type Selector Chip Bar that will be used for the new Top Queries section:

Mobile: Three column layout should change to one column

Re: #31

At mobile widths, the three column layout at the bottom of the copy should change to one column:

Make browser back/forward work.

Right now, it looks like the URL updates but the page does not reload.

Refactor time-series

Sub-issue to #92

Refactor time-series out of TrendsOverview.

Refactor search-bar

Sub-issue to #92.

Refactor search-bar out of the TrendsOverview.

Use most complete date set for x-axis.

We currently use the date set associated with the first trendline that will be drawn, but this may be incomplete. For example, selecting the state of Alaska causes the date set for Aleutians East to be used. This results in other trendlines being drawn outside the intended chart area and also prevents the hover card from appearing when hovering over dates that do not appear in the incomplete date set.

Trend chart overflows parent layout box

The trend chart overflows parent layout box:

This causes layout difficulties in widths less than about 880px or so (e.g. for mobile support) because it overflows 100% page width.

Map trend selection buttons don't activate

The buttons/chips for selecting a map trend don't visually activate when the button is selected. The map will change to display the new selected trend correctly but the buttons do not change to show the active group.

Map and Search bar selections should both trigger location changes

Currently, when clicking in the map, the location does not change to the selected region. The current location should be respond to both search bar and map selection events.

Reduce load time: consider using a binary data format or partition data

Currently we're spending most of our load time--even from a warm cache--paring CSV and transforming it:

On my machine this takes at least 5 seconds on a high-quality internet connection. Mobile experience through non-wifi will be a lot worse.

Two possible improvements:

• Use a binary format like parquet, which on top of being efficient for transfer, parses much more quickly.
• Partition data such that we only pull data at that level and one geo-level below.

Or do both.

Geopicker - Clicking "United States" has no effect

To reproduce: (1) Navigate to a state or county, (2) enter "United States" into the input field and (3) click on "United States" in dropdown. Rather than backing up to national level it doesn't seem to navigate.

Map navigation not resetting page to US

When the map resets to the national level, it does not correctly update the page navigation to reflect the change.

Mobile Header Layout

Related to #31. On smaller screens, the header should flow in this order:

• Google logo, if possible "COVID-19 Vaccine Search Insights"
• Downloads and documents on another line

Refactor into top-level components

Now that we have a solid understanding of the data and event flows for the dashboard, it's time we refactor TrendsOverview into several different Svelte components:

• Search Bar
• Choropleth Map
• Time Series

The goal being that TrendsOverview becomes mostly event passing and markup. It's much too large and unwieldy at the moment.

Mobile Search box layout

Related to #31.

The mobile search box doesn't constrain itself to the viewport and is clipped to the right:

Note, a responsive width box may be too small to show locations all on one line so you may need to play with line-breaks there are well.

Areas without data should be colored consistently.

We used to color "0", which should be "N/A", white. When ZCTAs were implemented zip regions without data were colored gray. This lead to a situation where both white and gray regions can be seen. We need to be consistent.