My Teams 2nd Place Entry for UNCG Green Hackathon 2020

The purpose of this hackathon was to create an interactive dashboard displayed as a webpage that would show detailed information regarding UNCG’s energy consumption. There were a few main points we had to hit including creating graphs to show the total and average energy usage from 2015 to present, as well as a graph that displays the predicted energy usage for a specific period of time in 2020.

My team consisted of four friends, Myself, Christopher, Kathrine, and Andy. We ended up getting 2nd place overall and won some prize money. Unfortunately we don’t know exactly where the other team beat us. But if I had to guess I’d suspect it was our code documentation. We spent more time trying to add functionality and make the dashboard look good than we did making sure our code looked good. Oh, by the way, we had 1 week to complete the challenge. And this was the week before finals, so everyone was super stressed out. I’m very proud of everyone in the team, we all did a great job despite the other stresses.

I had the site deployed to a heroku server at one point but am having some issues with it currently so I’ll just add screen shots of the site. If I end up getting it running again I will be sure to add a link to check it out.

This is the link to the project on Github.

• At first we were going to create the site using HTML and JavaScript because developing a site like that is incredibly fast. However once we got the instructions for the challenge and realized we would need to do some data manipulation we settled on using python and Dash.
• The data we were given was presented in .csv files. Because of this we really wanted to use Pandas DataFrames to quickly and easily parse the data. I believe this was the best move. I tried loading a single file with JavaScript and it took a few seconds, where a Pandas DataFrame could load many files almost instantly.
• The decision to use Dash was simple. We wanted different options as far as graphs go but each graph needed to have a high level of detail. Dash also gives the added bonus of giving the user the ability to zoom in on any part with ease.
• This is an example of the Dash bootstrap component code we used to create card objects

  ## GRAPH 1
          html.Span([
              html.H3('Energy Consumption Across UNCG',
              className='mb-0'
              )
          ]),
          html.Div(
              html.P(Descriptions.graph_one(), style={'padding': '3px 5px'}),
              className='description-block'
          ),
  
          dbc.Row([
              dbc.Col(
                  dbc.Card(
                      dbc.CardBody([
                          html.H6('Aggregate Type'),
                          GraphOneComponents.radio_avg_total(),
                          GraphOneComponents.aggregate_type_tooltip()
                      ],
                          id='aggregate-select'
                      ),
                      className="mb-3",
                  ),
                  md=3
              ),
              dbc.Col(
                  dbc.Card(
                      dbc.CardBody([
                          html.H6('Time Frame'),
                          GraphOneComponents.radio_time(),
                          GraphOneComponents.timeframe_tooltip()
                      ],
                          id='timeframe-select'
                      ),
                      className="mb-3",
                  ),
                  md=5
              ),

   

• Here is an image of the first graph. This was created mainly by Andy and Katherine. This graph shows both the actual and the predicted energy consumption for the selected timeframe. You can also choose to view multiple buildings by adding them to the dropdown menu on the left.

• This is an image of the second graph. This is the main part that I worked on. This graph will display the average energy consumption for the selected building and the selected timeframe. For example if you pick “hourly” it will show the average energy usage for each hour of the day from the starting date to the ending date.

• And this is an image of the bonus part my team mate, Christopher, created. It is a map of the UNCG campus overlayed on an interactive map. You can hover over the buildings to view the average energy consumption of the past 24 hours.

Thanks for checking this out!

-Kyle S.