U.S. Gas Prices Visualized
When gas prices skyrocketed to record highs earlier this year, I began building an interactive web app to track the current and historic trends across major U.S. cities.
The goals of the app were: 1) to create a product that allows myself and users to interactively explore both the recent and historic trends so that more context could be provided around high (or low) the gas prices have been, and 2) to fully automate all components of the app so that I didn’t have to spend time updating it every week.
The final product can be found here: U.S. Gas Prices, and the code behind the entire project can be found on my GitHub here: U.S. Gas Price Repo.
About the data
The data is sourced from the U.S. Energy Information Administration’s (weekly gas update). At the start of each week, the EIA updates the average prices for regular, midgrade, and premium retail gas. The data is available for a handful of cities across the U.S., as well as the overall average for the U.S..
This data is accessible via EIA’s API. I used the {eia} package is used to connect to the API and pull the data in a tidy format.
Automatic updating
The data is updated every Tuesday evening after the EIA refreshes the data on their site. This is done automatically via GitHub Actions. Once the new data is pulled, the visualizations and text are refreshed and the updated app is automatically deployed to shinyapps.io. The script for the GitHub Actions workflow can be found here.
Shiny app
The framework for this Shiny app was made using the {golem} package and displayed using the {fullPage} package by John Coene.
A huge thank you to John for creating many packages that are used for this app, including the aforementioned {fullPage} package and {typedjs}. This app was also largely inspired by John’s Freedom of the Press app which can be found in RStudio’s Shiny Gallery.
The packages used to create the visualizations include {highcharter}, {ggiraph}, and {reactablefmtr}.
An example of the user-interactivity features can be seen below:
Mobile & Desktop friendly
The site is optimized for viewing on both mobile and desktop devices. I used the {shinybrowser} package to detect the user’s device and display the visuals so that they optimally fit on the user’s device.
| Mobile | Desktop |
|---|---|
 |
 |
 |
 |