1

Open Energy Dashboard 3d Graphics

CST 489 Capstone Project Planning

Yasha Yakhnis

Martin Ronquillo

Saul Mendoza-Loera

Christian Martinez

Faculty Advisor: Bude Su

Industry Advisor: Steven Huss-Lederman

Summer 2023
 2

Executive Summary

Our main goal for this project is to add a 3D graphic feature to OED’s web-based energy

data visualization software. Currently, OED’s software only uses 2D graphics for data

visualization. Parties that will be affected by this new feature include current and future end

users that utilize OED’s visualization software. The anticipated outcomes are that end users of

OED will benefit from a more powerful means of measuring energy consumption than is

currently available. In order to complete our project a few objectives must be fulfilled.

The first objective for this project is to create a new query that will obtain hourly meter

data for days requested. The data will then be cleaned up and routed back to the user in order to

be used in the 3D visualization. Our next objective for this project is to create a new graphic

page that will give users the ability to implement 3D graphics with their data. The Plotly library

will be implemented on this page to allow for the ability to create 3D graphs. Our final objective

is to implement the necessary testing for the enhanced database as well as the new routing that

we will create.
 3

Table of Contents

Introduction....................................................................................................................................4
Project Name and Description................................................................................................... 4
Problem and/or issue in technology...........................................................................................4
Solution to the problem and/or issue in technology...................................................................5
Environmental Scan/Literature Review...................................................................................... 5
Stakeholders................................................................................................................................... 6
Ethical Considerations............................................................................................................... 6
Legal Considerations................................................................................................................. 7
Project Goals and Objectives........................................................................................................ 8
Goals.......................................................................................................................................... 8
Objectives.................................................................................................................................. 8
Final Deliverables...........................................................................................................................8
Approach/Methodology................................................................................................................. 9
Timeline/Resources...................................................................................................................... 10
Detailed Timeline.....................................................................................................................10
Milestones................................................................................................................................ 10
Resources Needed....................................................................................................................10
Platform........................................................................................................................................ 11
Risks and Dependencies...............................................................................................................11
Risks.........................................................................................................................................11
Dependencies........................................................................................................................... 12
Testing Plan.................................................................................................................................. 13
References..................................................................................................................................... 14
Appendix.......................................................................................................................................15
Division of Labor.....................................................................................................................15
 4

Introduction

Project Name and Description

Our client for this project is Open Energy Dashboard (OED). OED is a nonprofit

organization that provides users with free, open-source, web-based energy data visualization

software. The product that we will be creating will be a 3D graphic feature that will be added to

the list of available graphic features in OED’s data visualization software. OED’s current graphic

features are two-dimensional. OED’ data visualization software is capable of displaying detailed

electric and natural gas energy consumption data in a user-friendly two dimensional graph. In

addition, OED is capable of displaying a wide range of linear data, including, but not limited to

temperature, recycling, water usage, and so forth. With this new product that we will be creating,

OED will be able to provide its users with a new way to visualize energy data. The use of this 3D

graphic feature will allow users to obtain and discover valuable information as they analyze their

data.

Problem and/or issue in technology

One of the primary issues that the founders of the OED discovered was that many of the

options available to handle energy visualizations were either too organization specific, or only

accessible as a paid service. With these constraints in mind, the OED is designed to be a free,

lightweight, and generic tool that can be utilized by a wide range of consumers. Our client’s

mission is to provide a free energy dashboard that can be used across a vast diversity of

industries, organizations, and individuals, and is appropriate for both technical and non-technical
 5

users. The current problem is that the information provided by 2D graphics is limited. While

hourly data can be displayed, displaying hourly data over extended periods presents a problem.

Solution to the problem and/or issue in technology

Various parties may benefit from a more powerful tool with which to monitor hourly as

well as daily data over long periods of time. To accomplish this, it is necessary to incorporate 3D

graphics. Energy usage will be placed on the vertical axis, while hours and days will be placed

on the two perpendicular horizontal axes. This would enable consumers to be aware of the time

of day at which energy usage peaks, and take action accordingly. With the addition of the feature

that we will be creating, OED’s users will be able to visualize their data as described above using

3D graphics.

Environmental Scan/Literature Review

Other organizations and institutions have created similar energy dashboard software that

can be used to visualize energy consumption and usage. Some readily available dashboards can

be used after purchasing the product while others are free to the public. For example,

EnergyCAP offers energy dashboards that can interpret real time usage data with the use of

different charts and graphs and allows users the ability to share their dashboards within their

organization and to the public (EnergyCAP, 2023). Unlike OED, clients that use EnergyCAP’s

dashboards must pay a subscription fee in order to use their product. An institution example of

an energy dashboard comes from the University of California Davis (UCD). The name of their

product is Campus Energy Education Dashboard (CEED). CEED is an interactive dashboard that
 6

provides real time data of energy usage from different department buildings at the university

(University of California Davis, 2023). This institution’s energy dashboard is free to the public.

However, in contrast to OED, CEED is campus specific, and not universally applicable.

Stakeholders

The primary stakeholders for this project include external stakeholders such as end users,

as well as internal stakeholders such as developers and OED itself. This project will impact both

existing and future consumers, by adding useful new features. Users of this product will benefit

from this project as the enhancements to OED will enable them to measure energy consumption

with greater precision. Since this product is open-source and applicable to a wide range of

industries, users of this project may represent almost every facet of society. Future developers

will also be affected by the code we leave behind. Any subsequent contributor that works on

OED must be able to understand and build upon our work, as writing clean and understandable

code is vital. OED relies heavily on volunteer developers, many of whom are students. Lastly,

OED itself is a major stakeholder of the project. The project’s success or lack thereof will impact

the success of OED as an organization.

Ethical Considerations

According to our industry mentor and founder of OED, Huss-Lederman, there are no

ethical issues relevant to this project. Common ethical considerations include, but are not limited

to, potential harm to minors, potential privacy concerns, potential for misuse of the product, and
 7

potential for scams. None of these concerns are likely to be relevant to OED. OED does not

contain any content that is inappropriate for children. Furthermore, OED does not store any

personal or sensitive information of clients (e.g. bank information, PHI, Social Security numbers,

etc). Also, most of OED’s users do not have login credentials. Thus, scams are unlikely to occur

that can harm OED’s clients.

Legal Considerations

Due to the nature of open source software, OED is protected under the Mozilla Public

License (MPL). This will ensure that this project can remain free. As open source contributors,

we will be required to sign a legally binding agreement called the OED Contributor’s License

Agreement (CLA). The OED CLA states that we will retain ownership of the copyrights to our

contributions; however, the OED retains the rights to use them at will. Moreover, the CLA

stipulates that our contributions are bound by the terms of the MPL (OED, 2023, May 16).

Furthermore, there are no legal risks to the project. If our code is discovered to be faulty, and

OED uses it nevertheless, OED assumes all responsibility for any ramifications that may result.

We are legally immune to responsibility for error, provided that no malicious intent was present.
 8

Project Goals and Objectives

Goals Objectives

SRS documentation. Identify use cases.

Implement 3D graph functionality. ● Implement backend

○ Write SQL to retrieve data
○ Route the retrieved data from
the database back to the client
● Implement frontend
○ Write react front end to
implement the user interface
and fetch the data from the
backend
○ Implement Plotly to display
data in three dimensions
● Test for functionality
○ Unit test for appropriate data
retrieval results
○ End to end test for overall
functionality

Have all database queries run in 1 second or ● Test the queries for efficiency
less. ● Optimize the SQL code if necessary

Update design documentation. Document each change that was made after
every commit.

Final Deliverables

Our final deliverables will be encapsulated in a Github repository. This will firstly

include the backend and frontend portions of the 3D Graphic functionality, meeting the desired

constraints of speed and reliability. Additionally, this will include well-written documentation.

Github commits will be traceable and visible to the public for resume building. Client approval
 9

will take the form of a successful Github pull request for the final product, which will also be

visible to the public.

Approach/Methodology

Our methodology will largely resemble the “Agile” software development process,

supplemented with some elements of “Waterfall”, also known as “plan and document.” To start

with, we will set up one Github repository for the entire team. In addition, each team member

will establish a fork on his personal Github repository. Each team member will set up the Docker

environment on his individual machine. After setting up the environment, we will conduct

appropriate research on OED technologies. These include, but are not limited to, Docker,

Postgres, PGSQL, React, and Redux. Subsequently, we will design ideas with accompanying

documentation, in the vein of SRS (software requirements specification) diagrams. However, this

will not be a comprehensive SRS document as is typical of the “Waterfall” process. After

conducting appropriate documentation, we will implement our ideas into functional code.

However, this stage of the project will require the flexibility allowed by the “agile” process. Due

to the exploratory nature of the project, it will be necessary to test ideas and adjust them over the

course of the development process, rather than having the entire development process set in

stone in advance. We may use a pivotal tracker to facilitate the development process. After each

implementation of a functional portion of the project, we will commit the changes to github and

conduct a peer review of all pull requests. Each pull request and commit must be reviewed by all

team members to keep in sync with each others’ progress. Lastly, we will create a final pull
 10

request that will be reviewed by OED. After passing the review process, our code will then be

put into production.

Timeline/Resources

Detailed Timeline

*Tentative and subject to change.

*Milestones are derived from the design documents (OED, 2023, May 30).

Projected Time Frame Milestones

Week 1 SRS Documentation

Weeks 2-5 (working in parallel) Initial DB

Initial client

Testing

Weeks 6-10 (working in parallel) Enhanced DB

Enhanced client

Groups

Week 11 Final pull request

Resources Needed

Our team already possesses all the necessary physical resources. The only required

equipment is a computer capable of running the virtual environments in which the code will be

running. As for media components, Discord and Zoom will be utilized as a primary means of

communication for collaboration.

 11

Platform

The platform we will be using is Docker. This is essentially a Linux environment running

on a Windows machine. It is similar to (but not entirely the same as) a virtual machine. Our

project will be running within this Docker environment. For the backend, we will have A Node

JS environment with an Express server, along with Postgres as the Database interface. For the

frontend, we will be using Typescript, as well as React with Redux and Plotly.js. We did not

choose the environment; rather, it was chosen by our client. Lastly, our code will reside in a

Github repository, in accordance with the industry standard.

Risks and Dependencies

Risks

One potential risk is failing to meet the efficiency requirements. The project we will be

implementing requires more data than previous OED projects. One of the issues that could arise

would be that queries could take longer than the expected “1 second or less” time constraint due

to the sheer amount of data to be retrieved. In the worst-case scenario, there could be up to 24

data points per day per meter for a duration of one year, potentially involving multiple meters (24

* 365 = 8760 data points per meter). The data retrieval process could be time consuming;

however, with proper optimization combined with appropriate hardware, the code should be able

to run within the given time constraints. Moreover, in the event that the server becomes

overwhelmed, it may be necessary to require users of the 3D graphic feature to be logged in.
 12

Another relevant risk is a tight time constraint, given that our team is currently unfamiliar

with several of the technological requirements of this project. It will likely be challenging to

fulfill the goals within the given timeframe. In order to expand upon OED, it will first be

necessary to possess a functional understanding of existing OED code. This will likely be as time

consuming as producing the 3D graphics feature.

Dependencies

Our work builds upon already optimized data such as materialized views from which to

query clean, non-corrupt, and properly formatted data. Furthermore, existing database structures

are already optimized for efficiency. This will help ease some of the workload from our portion.

As of now, the project we are working on is independent of other ongoing projects; however, if

our project is successful, other development teams may be able to expand upon our work to

optimize performance and implement additional features.

As with most projects, later stages of our project are dependent on earlier stages. For

example, the enhanced database stage is dependent on the initial database having been

completed. Similarly, the enhanced client is dependent on the initial client having been repeated.

The routing is dependent on the database queries working. If the database queries are not

functioning properly, then the data will not be routed back to the client. The frontend is

dependent on the backend functioning properly. If the database queries or the routing is not

working properly, then the 3D graphics visualization will either not be available to the client, or

will be displayed incorrectly.

 13

Testing Plan

Ideally, if all goes according to plan, we will use chai/mocha to unit test the functionality

of our implementations. Testing will occur in several stages. Firstly, the database queries and

routing will be tested separately. Secondly, they will be tested together, to make sure they are

properly integrated. One particular feature we will test is whether the routing detects bad

requests. Finally, we will implement end-to-end testing to ensure that the frontend works along

with the backend. While testing is typically a requirement for pull request approval, depending

on time constraints, this portion could potentially be omitted or deferred to future contributors.
 14

References

ENERGYCAP. (2023, May 15). Dashboards. ENERGYCAP.

https://www.energycap.com/resource/dashboards/

OED (2023, May 30). 3D Graphic of Usage. OED.

https://github.com/OpenEnergyDashboard/DesignDocs/blob/main/3DGraphic/3DGraphic

.md

OED. (2023, May 16). OED Contributor's License Agreement (CLA). OED.

https://openenergydashboard.github.io/developer/cla.html

University of California Davis. (2023, May 15). The first step to saving energy is seeing how

much you use. University of California Davis.

https://facilities.ucdavis.edu/energy-engineering/ceed
 15

Appendix

Team Members

Division of Labor

Team Member Role

Yasha Yakhnis Backend

Saul Mendoza-Loera Backend

Martin Ronquillo Frontend

Christian Martinez Frontend

*Due to many factors, such as levels of skill, interest, complexity and time constraints, the

division of labor is not set in stone. Team member roles are subject to change and may overlap.