In 2020, U.S. corporations spent upwards of $150 billion on digital advertising. This massively profitable industry is pushing companies to learn as much as possible about their consumer base in order to effectively market themselves. With the power of INRIX APIs, vital information about where customers are coming from can be utilized to benefit businesses of every variety. One of the products offered by INRIX is the "Trade Area Trips" API. This informational tool allows users to gather the details of any trip at any time from point A to point B on record. When confronted with this tool, our team noted its potential use for business owners. If companies were to know where their customers are coming from and when they are making their trips, it would dramatically improve their ability to market to their target audience. This information could even help businesses decide which high-traffic areas would suit a new location, or which areas require more effective advertising.

What it does

After receiving the address of a location as input, the program returns trip information within the standard radius of 10 miles collected from the INRIX Trade Area Trip API over the selected period of time. Within that radius, the website will break down the area into blocks, highlighting the areas from which consumers drove to get to the destination business. These regions are color-coded based on how many trips were made from that block to the destination, with more trips being represented by more vivid colors. The program also offers comparisons between date ranges. It allows users to select two date ranges, then gives them the option to overlay the data to see a percentage change over the specified date range in each region or to view the two data ranges side by side.

How we built it

At the core of the application lies the "Trade Area Trips" API. This API offers a collection of nearly every trip that INRIX records. For all of these trips, it documents the start time, end time, start location, end location, distance, average speed, and data credibility of each. These data points are incredibly valuable, especially when formatted in a user-friendly way. In order to make this data palatable for the general public, we parse and display it on a color-coded map. The frontend website to display the map was developed using Angular, and the backend that processes the data from INRIX’s API was built with Node.js. The frontend web application incorporates the Leaflet library to visualize our data on a map, and uses the Chart.js library to display hour-by-hour data for each region. The backend uses Express.js to create a public API, and we used the Axios library to make our HTTP requests to INRIX. The data processing was primarily accomplished by sorting each individual trip with a classification function that turns it into a grid of boxes to be displayed on the map.

Challenges we ran into

At first, we ran into issues fetching authentication tokens for the INRIX API, as most of us didn’t have previous experience with restricted APIs. However, the INRIX documentation and our hackathon mentors were very helpful, and we eventually figured out how to refresh our tokens dynamically. We also faced challenges creating the grid of squares on our map, as we had to ensure we took into account the curvature of the Earth. We resolved this using a series of equations for translating latitude and longitude coordinates to miles, which worked perfectly.

Accomplishments that we're proud of

We are extremely proud of the visualizations we were able to create. The map is interactive and clearly displays the data that is most important to the user. Being able to display our data over an interactive map was something we had really hoped to complete, and were extremely proud that it could be accomplished in time. Along with our visualization, the practical usage of the INRIX API that was provided is a feat we are very proud of. To reiterate, most of the team was completely clueless with APIs going into the project. Through the workshop and mentorship, we were able to overcome our lack of experience and create a working project. We pride ourselves on our new knowledge about the usage of APIs.

What we learned

Some members of the team came into this event with no prior experience in JavaScript, and were able to quickly learn in order to help contribute to the end product. Getting hands-on experience dealing with API calls provided members of our team with an incredible opportunity to learn real world skills. Additionally, we were able to learn about many of the freely available libraries and APIs offered for JavaScript, which allowed us to elevate the project as a whole. Starting from scratch is a tall task, and the truly effective programmer needs to know what libraries and APIs are at his or her disposal when creating a project.

What's next for Crystal Ball

The team sees this as a constantly evolving product, as was demonstrated by many of the features that were added after the initial functionality of displaying relevant customer trip data was accomplished.Given the data-collecting nature of the INRIX API, Crystal Ball is scalable to larger quantities of data should they be provided. Our goal is to provide businesses with as much relevant information as possible. Some additional functions we could see being implemented include displaying traffic trends on top of the data as a way to explain consumer trip habits, as well as providing the user with the ability to export the data to analyze using their own tools. We also believe that this tool could provide even more helpful insight over longer periods of time and across larger regions, though we are limited by INRIX’s API trial restrictions.

Share this project: