How to Make a Data-Driven Decision Come Moving Time
By: Jeremiah Trnka
Tags: React, Lambda School, JavaScript, Plotly, Lessons Learned

Coding While Rolling a Stone Uphill

I can honestly say this project was the most challenging project I have participated in, to date. Throughout the entire project our team faced constant challenges, including: access to the initial code we would be taking over took several days, which hampered our initial planning because we did not know the current state of the application; the APIs the frontend and backend relied on for data were suddenly unavailable; and, once data was available, it was completely different data, and a different shape than the original data the application used.

The shape of the city object the original project code was based on.

Original City Object

For example, the original city object included several fields that were the driving data behind many of the comparative graphs, including:

Average age

Household income

Average house cost

Cost of living index

Average temperature

Population history

Historical house cost

This data also included a link to a Wikipedia image that was used as the background image for each city card.

To further complicate matters, this data was also being used to populate our backend on initial application load, and we lost access to this API almost immediately.

The new city object we were given half way through the project.

Revised City Object

When we regained access to a new API at the end of the second week of the project (we only had a total of 3.5 weeks to complete the project) we found the shape of the data had completely changed from the original data.

This necessitated a complete rewrite of our backend, and major parts of the frontend, including the functions generating comparative graphs for each category of data.

Making Lemonade Out of Lemons

Our game plan throughout the project was to finish as much as we could, with the limited time we had to work on the project. With that goal in mind, half our team set to rewriting the backend, while the other two of us focused on rebuilding the frontend. My focus was rebuilding the graph generating functions to display the data we had in a more visually engaging manner.

Working With Plotly

When refactoring the graphing functions, I quickly discovered that both the X and Y axis titles would need to be dynamically rendered, depending on the category of information being displayed, and some of the data wasn’t even in a format that could be graphed! For example, each city included a simple_climate field, but this was one of three different strings (cold, mild, or hot), not an average annual temperature. Further, depending on the category of information being displayed, many of the layout options Plotly needed to properly display the data would need to be modified.

In order to accommodate each individual graph requirement, I started with two generic objects, one to hold each city’s individual data, and a second to tell Plotly how to generate the graph.

Generic data and layout objects used to generate Plotly graphs.

Then I wrote a graphBuilder function to generate the necessary data and layout arrays the <Plot /> component needed. This function was structured as an if /else statement for each category in order to accommodate each individual difference in field names of the data source, axis titles, etc. Where necessary, this function called other helper functions to fill in additional pieces of data as needed to generate each graph.

Function used to generate the data and layout arrays for each category of data.

You may remember, some of the data was not in a format that could be graphed, because the values were strings, not numbers (e.g. cold, mild or hot). In order to accommodate this data, I create a helper function which translated these values into numbers, and then set the marker to one of three different emojis to represent the value.

Function to convert climate string values into numbers and emoji icons for the graph.

As a result, we now had a function that easily handled each different type of data, and displayed the data in a fun and interactive way.

Average rental price by bedroom graph.

Average walkscore by city graph.