Skip to content

Online course: Your First Data Application

This quick tutorial shows you how to create a web data application to visualize COVID-19 Mobility Report data provided by Google BigQuery. If you don’t have a Google Cloud account, you can easily create your BigQuery account without a credit card.


This tutorial is meant for product managers, data scientists, data engineers, software engineers, and anyone interested in creating a lightweight interactive data application that can be directly deployed in the web server technology of your choice.

This class requires no software development knowledge. It does require typing a couple of commands on a terminal to unzip the generated data application and start a web server.


The following video shows you step by step the content of this tutorial. You can also follow the written directions step by step on the next sections.

The App

At the end of this tutorial, you will have created and deployed a web data application where you can interact with the Google Mobility Report Data, select different locations around the world, and see the mobility trends across multiple metrics.


The next section will walk you through the creation of this application step by step. You can also follow along with the video below.


  1. Open ChartFactor Studio from by selecting the “Try Online” button image

  2. Click on the “New” button to create a new application image

  3. Type the name of your application. We are going to name it “COVID-19 Mobility Report”. image

  4. Set up a connection to your Google BigQuery data warehouse by selecting the lower-right blue button and selecting BigQuery. image

  5. Type the data provider information:

    • Name: any name that you’d like to use to identify your connection
    • Project ID: This is the ID of your Google Cloud project. As mentioned earlier, if you don’t have a Google Cloud account, you can easily create your BigQuery account without a credit card.

    Now, click on the “Save” button. image

  6. Select your BigQuery data provider you just created image

  7. Select “Data Sources” image

  8. Now, you will authenticate to your Google Cloud account. Select your Google account to access your data and click on the “Allow” button. Note that ChartFactor Studio runs completely on your browser and only queries data that you need to see based on your navigation. image

  9. Select the “bigquery-public-data” project image

  10. Look for the “covid19_google_mobility” dataset and select it image

  11. Select the “mobility_report” table image

  12. Now you should see the table selected as shown below image

  13. Switch Studio to manual run to execute queries only after we are done with all settings image

  14. Enable column filters to slice and dice your data straight from the table image

  15. On settings, select "Size columns to fit" image

  16. Select a color theme and save this visualization image

  17. Resize your widgets as needed image

  18. Now let's trend the data by creating a Multi-metric Trend chart. The easiest way is to duplicate your table chart by selecting its “duplicate” button. image

  19. Open the editor of the duplicated visualization and select the multi-metric trend chart image

  20. Now that you have selected your Trend chart, change the time granularity to DAY instead of MONTH to have more points in your trend image

  21. Change the metric operations to AVERAGE instead of SUM. Do that for all metrics. image

  22. Add a new metric by clicking on the metric plus (+) button and select the retail metric image

  23. Go to settings and remove labels image

  24. Enable the legend at the top and save your trend chart image

  25. At this point, you should have an interactive dashboard as the one shown below. You should be able to select columns and filter them as needed. image

  26. Now let’s generate your web application. Click on the "Generate web app" icon on the top right on the screen. image

  27. Now select the "Generate web app" button image

  28. Depending on your browser settings, the generated application will download directly to your Downloads folder or it may ask you for a location where to download your generated file. In my case, I am asked to select the location. I select the “Downloads” folder and save.

  29. Now, open a Terminal window, move to the folder where you downloaded the application (e.g. Downloads folder) and use the unzip command in Mac to unzip the file. Use an equivalent command in Windows. image

  30. Now let’s start a web server to test your new app. If you have python3 installed, you can start a web server by typing the command below where 8080 is the port number.

    python3 -m http.server 8080

  31. Open a browser tab, open your web server URL and navigate to the folder where you unzipped your application. image

  32. Your web data application is now deployed and ready for users to explore and interact with the COVID-19 Mobility Report data.

  33. END