EcoMap

EcoMap is an innovative website bringing critical energy information to a wide audience. With updating statistics gathered through multiple decades, EcoMap delivers the important data to consumers.

Comment

EcoMap

Inspiration

We realized that conversations about the environment were often surrounded by misunderstood data and poorly supported statistics. The inspiration behind EcoMap was to raise awareness about energy consumption patterns throughout different states. Before we started, we were interested in the distinctive differences in energy consumption throughout the United States. The availability of certain resources means that different areas have different access to energy. A critical idea of the project was to include regional illustrations that could help people understand the availability of certain energy. By combing through intricate data, we hoped that we would be able to present the same information in a visual manner. We hope our illustrations will empower people to do more research and breed consciousness in energy consumption.

What it does

EcoMap is a website that visualizes energy consumption data for each state. There are three main modules that our website includes. The first piece is a map of all the power plants located in the state. It takes into account the total megawatt production for the size as well as the primary source of energy for color when displaying. The second piece ranks each state in comparison to others in a few key statistics. These include emission, generation, renewable energy, and retail price. It offers a simple yet meaningful pie chart that highlights each state’s rank. The third piece includes color-coded graphs of energy consumption. The graphs highlight a contrast between renewable and non-renewable energy to bring focus to our energy consumption choices.

How we built it

We created a majority of our website using HTML, TailwindCSS, and Javascript. We started by researching available data online. We then started by making various calls to different APIs, to understand the data a lot more as well as what it meant for the environment. We ultimately decided to simplify all the data and condense it down to a few critical categories that would be of major interest to people. This included using different endpoints that would give us different data, such as consumption and emissions. We explored further with what we could do with URL query parameters and considered different methods of displaying all this information. We started by creating graphs with Chart.js, making calls to APIs for our data and learned how to create our graphs. We then worked on bringing in comparisons from each state, which could rank the primary source of energy for different states. Lastly, we rendered a map of different states in the United States, using an API to locate each state’s coordinates and boundaries, and used another API to plot the longitude and latitude of various power plants in each state. We went through many design ideas and created many changes in data, display, and color coordination that would be helpful in our overarching user experience.

Challenges we ran into

We faced many challenges throughout the project as many of us were working with new things. One of the most challenging aspects was creating a map that displayed different power plants in each state. At first, we struggled with finding the necessary data to complete this. We ultimately found an API that gave us coordinates of different plants, as well as libraries that would help us display and plot graphs. A lot of the map libraries were difficult for us to use or were deprecated, so we struggled with getting it set up. We also had trouble ensuring that our website would be responsive to different devices. Most notably, Chart.js and Leaflet.js were not built well to handle different screen sizes, making some styling very difficult to modify. There were also issues with the API where we had to validate and modify data, as there were some inaccuracies with the API.

Accomplishments that we're proud of

We are proud that we were able to bring our idea to life. Even completing the website seemed like an insurmountable challenge at first, and we are extremely proud to see what we have been able to accomplish in the short span of 36 hours. As beginners, we are happy that we have been able to learn so much more through the experience and there are so many celebrations to make for everyone on this team. We are excited that we’ve been able to participate in this hackathon and can’t wait to start our next project.

What We Learned

We were able to grow a lot in terms of technical proficiency. A few of us were new to JavaScript and learned more about the web development process through this project. We also were not familiar working with data such as APIs, CSVs, and JSON objects, but through familiar tools, such as Google Sheets, we were able to quickly understand how to process this data. We gained a lot of insight into data visualization, including charting libraries like Chart.js and Leaflet.js for the first time, and ultimately created informative and visually appealing graphs.

What's next for EcoMap

We hope to develop EcoMap further by expanding the data that we provide and include more methods of visualization. We hope to incorporate the total production and sales, these will hopefully provide more of the economic context of the story. Our biggest hope for EcoMap is to help raise more awareness about the climate and what consumers can be doing for the environment.

Spacer

Share this project:

Updates