Displaying building energy usage data in AR

Jordan Hill
7 min readOct 23, 2020

Why visualize building energy usage data at Georgia Tech?

Georgia Tech has multiple ongoing sustainability initiatives involving energy usage and carbon emissions. Representatives of the Office of Sustainability and Facilities Management introduced us to a few of these initiatives, including sustainability certifications, the Board of Regents’ ‘Yellow Book’, and solar energy use on multiple buildings throughout campus. Clough Undergraduate Learning Commons building (CULC), for example, is equipped with 360 solar panels. The building is also equipped with daylight harvesting and motion sensors to detect light levels in common areas inside of the building to create a more efficient lighting and HVAC settings. CULC is one of the 23 buildings on Georgia Tech’s campus that is also LEED certified. LEED (Leadership in Energy and Environmental Design) is an internationally recognized program for green building certification. Multiple levels of LEED certification are met on GT’s campus, and of the 23 buildings built between 2003 to 2015, all are silver-level certification or higher. In terms of carbon emissions, GT has found ​roughly 8% of gas emissions per 1000 sq. ft. to be reduced since 2011 [1]. This was a major accomplishment due to Georgia Tech’s demand for world class research and lab facilities.

Equipped with goals to bring awareness to campus sustainability initiatives and offer an engaging platform to interact with energy usage data on a building-level, we wanted to develop an interactive, augmented reality prototype to display usage data outside of each building so to create an energy usage walking tour of the campus. We received a good amount of data from our partners in Facilities Management and we used these data to design multiple visualizations of energy usage on a building-level.

We received commodity data for four major buildings on Georgia Tech’s campus, CULC, Engineered Biosystems Building (EBB), Ford Environmental Science and Technology Building (ES&T), and the Student Center, in the form of high-level executive summaries, aggregated and graphed together, as well as an excel file of each building’s commodity usage data and Energy Use Intensity (EUI) trends data broken down by month. We created visualizations that displayed a building-level comparison, as well as a commodity-level comparison.

Brainstorming visualizations for commodity data

The final output of the project is a detailed and comprehensive proof of concept in the form of a prototype. We’re excited about the opportunities to scale this project to incorporate multiple buildings on campus, as well as add both in features and functionality to make the experience richer and more engaging. We will discuss both additional features and functionality, as well as future work we would recommend for the project if it were to be continued.

Our Prototype

We developed a Web-based AR prototype designed primarily for mobile devices. Our dataset was primarily a time-series including one temporal attribute (Month) and three quantitative attributes (consumption values for Natural Gas, Chilled Water, and Electricity). We initially tried visualizing the entire dataset (Figure 1) incorporating all metrics at a monthly scale. However, given the space constraint accompanying mobile devices, we experimented with different aggregation levels including quarters, semesters, and years, ultimately deciding that years was the best aggregation level to give an overview of the data on mobile devices.

Initial prototype for the three energy metrics across all months for a single building.

Given the context of a time-series dataset, the prototype supports two primary views: a ​Trend View ​and a Compare View.

Trend View

The trend view enables observing changes in: (i) total energy consumption values across campus buildings and (ii) energy metric values for individual buildings. Following recommendations from prior work on perceptual and task-based effectiveness of different graphical encodings [1–4], we use multi-series line charts as the primary visualization technique in the trend view. Figures 3 and 4 show screenshots of the trend view at a campus-level and for Student center between Jan 2015-Nov 2019, respectively.

Campus Trend View
Building Trend View — Student Center

Compare View

The compare view enables observing raw values and comparing values for: (i) total energy consumption values across campus buildings and (ii) energy metric values for individual buildings. Following recommendations from prior work on perceptual and task-based effectiveness of different graphical encodings [2–5], we use grouped bar charts as the primary visualization technique in the trend view. Figures 5 and 6 show screenshots of the compare view at a campus-level and for Clough Undergraduate Learning Commons between Jan 2015-Nov 2019, respectively.

Campus Compare View
Building Compare View — Clough Undergraduate Learning Commons

The final prototype is implemented as a HTML application using the A-Frame web framework. A combination of D3.js and jQuery is used to bind data to A-Frame objects and add objects (e.g., rectangles, lines, text) to the scene. We use images of the Georgia Tech campus and the different buildings as the view background to emulate in-person viewing of the campus buildings through a mobile camera as we were unable to go on campus in-person.

Future Work

We found as we were communicating with sustainability subject matter experts, we would not be able to design an experience that calculates the carbon footprint of buildings, however, if desired, this is something that could be looked into for future work, and displayed in an AR web application. The team would need not only the building’s operational usage data, but also data from personnel who are frequently using the building, like mode of transportation, and travel schedules.

  • Our design and idea as it currently stands has the potential to be expanded upon, and include additional buildings on GT’s campus. In future work, we could include additional, possibly older buildings, and separate buildings by “ECO” buildings — based on their sustainable design and construction, and buildings which are perhaps less energy efficient to find trends and patterns in comparisons. We could then, with a larger data set, be able to start making hypotheses surrounding the context of the data, and asking questions regarding the energy consumption and usage on a building-level.
  • One thing all of us wished we were able to do was to develop and test the prototype while on campus. In future work, we would want to test and iterate the functionality of the prototype, geo-locate or assign parameters around our experience to test, and to test the design intuitiveness as well as the functionality with users in our target audience.
  • One near-term extension of the current prototype is to replace abstract graphical objects (lines and bars) with more meaningful glyphs (e.g., battery for ​Electricity​, water drops for ​Chilled Water​). If designed effectively, such glyph-based visualizations have been shown to be more engaging and memorable [6, 7], allowing end-users to be more immersed in the data and findings. Along the lines of supporting a more immersive experience, using a glyph-based approach will also allow us to explore potential opportunities and benefits that arise from 3D data visualization, which we intentionally avoided given our current dataset and targeted tasks, as well as a lack of the perceived benefits of using 3D visualizations [8, 9].
  • In terms of implementation, while our current setup serves as a good Proof-of-Concept, we would like to develop it further to: (i) make it a more coherent application (as opposed to the current collection of web pages) and (ii) support interaction with the chart to support actions like zooming, filtering, and gaining details-on-demand.

References

[1] ​https://www2.isye.gatech.edu/

[2] Cleveland, William S., and Robert McGill. “Graphical perception: Theory, experimentation, and application to the development of graphical methods.” ​Journal of the American statistical association​ 79, no. 387 (1984): 531–554.

[3] Heer, Jeffrey, and Michael Bostock. “Crowdsourcing graphical perception: using mechanical turk to assess visualization design.” In Proceedings of the SIGCHI conference on human factors in computing systems, pp. 203–212. 2010.

[4] Saket, Bahador, Alex Endert, and Çağatay Demiralp. “Task-based effectiveness of basic visualizations.” IEEE transactions on visualization and computer graphics 25, no. 7 (2018): 2505–2512.

[5] Brehmer, Matthew, Bongshin Lee, Petra Isenberg, and Eun Kyoung Choe. “Visualizing ranges over time on mobile phones: a task-based crowdsourced evaluation.” IEEE transactions on visualization and computer graphics 25, no. 1 (2018): 619–629.

[6] Haroz, Steve, Robert Kosara, and Steven L. Franconeri. “Isotype visualization: Working memory, performance, and engagement with pictographs.” In Proceedings of the 33rd annual ACM conference on human factors in computing systems, pp. 1191–1200. 2015.

[7] Hullman, Jessica, Eytan Adar, and Priti Shah. “Benefitting infovis with visual difficulties.” IEEE Transactions on Visualization and Computer Graphics 17, no. 12 (2011): 2213–2222.

[8] Franz, Markus, Michael Scholz, and Oliver Hinz. “2D versus 3D Visualizations in Decision Support–The Impact of Decision Makers’ Perceptions.” (2015).

[9] https://www.nngroup.com/articles/2d-is-better-than-3d/

--

--