2022 HACC Submission by AFR

Inspiration

AFR’s inspiration came from one simple source: helping others to tell a story. The team focused on building an application that would let anyone visualize data effectively and efficiently. Multiple types of graphs at the user’s fingertips makes it convenient for state agency workers to use our app instead of using a paid source to visualize their data. Thousands of numbers and figures in a database does not drive a point home to onlookers. AFR hopes to let human beings express thoughts, findings and ideas to one another through beautiful data.

What it does

Our website is able to take the data from the open data Hawaii site and turn it into a diverse range of graphs. The home page asks for a link, specifically the CSV link to a data set from the open data Hawaii site, and how many graphs they wish to make. Afterwards, the user can select 2 of the given columns and select what type of graphs they would like to make.

How we built it

Front-end started with a UI mock-up to get a general idea on how the UI would look. We then started the HTML code for each page to design the bare bones interface. We then verified the final design as a team. Once verified, we worked on making the application aesthetically pleasing with CSS, and some JavaScript. We then made sure to make text inputs, checkboxes and buttons to link with backend functions.

Framework used Fast API for pretty much everything. We started off by being able to pull the dataset's link, and from there on we continued to base work off of information from that link. From page one you were able to insert the link and from going on to page 2, we were able to grab the headers of that data set to be displayed and used on page 2. We connected a lot of the frontend and backend code to get the website working.

Backend chose to use python to handle the datasets and turn them into graphs. We leveraged python libraries like pandas to parse through the datasets and matplotlib to turn the data into graphs. We started by getting the absolute necessities of taking the data from the open data Hawaii site and turning it into a graph. From there, we worked towards adding more options and customization features.

Challenges we ran into

Some challenges the frontend team ran into were CSS problems; it took a lot of time to get all of our elements to look exactly how we planned. There were also JavaScript problems. The frontend team was not very experienced in JavaScript, and for the most part we had to learn on the fly.

For the framework team, being like the whole skeleton of the project, we ran into a lot of issues. This project is pretty much the first time using Fast API in a real-world situation, so that did not help the process. We had to learn everything from scratch! One of the big issues we ran into was being able to call the datasets headers and actually making them usable.

The biggest issue the backend team ran into was compatibility. We were able to make a bunch of functions in isolation. However, when it came to combining pandas and matplotlib or Back-end to Front-end, we faced new challenges that we would not normally experience in a classroom setting. Communication became a huge key to making sure that whatever one person built could work with another in order to have our site be cohesive.

Accomplishments that we're proud of

The frontend team’s accomplishments that we are proud of is the JavaScript code, since it was our first time ever touching JavaScript.

The framework team’s accomplishment that we are proud of is being able to learn what we have with the time we were given. We also feel very accomplished that we have been able to connect the pages together. We underestimated the importance of passing variables and data between multiple pages, and we were very pleased to have figured these issues out.

The backend team’s accomplishment that we are proud of is the customization of the graphs. We have line, bar, pie, and scatter graphs or even the option to combine them available. Even further than that, we developed tools for the user to change the color and style of the graph. Every graph has different customizable aspects, like the markers for line graphs or the orientation for pie graphs.

What we learned

Front-end learned JavaScript and some special settings in CSS that some of us did not know previously. Some of us had to learn an entire coding language, as most of us had python experience but not JavaScript or HTML.

Framework learned Fast API that most of us did not understand to this scale. Also picked up skills of working in a team on a big, or big to some of us, coding project like this.

Back-end learned many different aspects of programming projects in a team. Communication became a huge aspect within our own sub team and with the other sub teams. Within Back-end simple things like adding comments, naming variables appropriately, and using a specific type of variable became hugely important in making sure everyone else could understand and use the code. On a larger scale, making sure to keep updated on other sub teams on both their and our own development was important to make sure everything could work together.

What's next for 2022 HACC Submission

There are many features we wish to add. Currently, we have such features as plotting multiple lines, sorting the data so it plots only what you want, and more graph customizations at the ready. However, we are limited on time and cannot add these features reliably within the given timeframe on the framework and frontend. Given more time, we will likely add these features into our site, making it a better user experience.