Data Visualization — Information Design Project 4
Project Description
Project 4 focuses on making sense of a chosen data set and creating visual representations of the data in a dashboard format. This data visualization is focused on answering the question:
“How are the average temperature, electricity usage, and month of the year connected?”
Illustrations and shifts in form, color, and scale are tools that I will use to understand the connections and patterns in the data. The purpose of this visualization is to also help the audience critically think about the data and modify excessive electricity consumption.
The Data
Going into my electricity usage portal, I was able to gather the relevant data. The data includes each category’s usage in kilowatt-hour (kWh), total usage (kWh), and the average temperature of each month (°F). I also included the monthly cost of electricity just in case this was another variable I wanted to explore.
Competitive Analysis
Before jumping into sketching, I decided to take a look at existing data visualizations related to energy consumption to identify strengths and weaknesses in their designs and scope out what I might be able to do better in my visualization.
In “America’s Energy Hotspot”, some of the effective aspects are that the key is easy to use to interpret data and the color combination is interesting since blue and orange are complementary colors. One ineffective aspect is that the text is somewhat hard to read because of the small size and there is not enough contrast between the gray text and the tan background.
In “Estimated U.S. Energy Consumption in 2018”, some of the effective aspects are that they used colors to distinguish between different energy categories and the use of weights of line and size of the boxes. Some ineffective aspects are that the visualization includes a lot of data which can be overwhelming for the user to understand and there is not enough explanation of the terms used or description of what this data actually represents.
Exploration of Form, Color, and Scale
Since there were a total of five categories of electricity consumption, I decided to explore shapes like circles and pentagons that would allow the user to easily read through the categories at first glance.
- With the circles, I experimented with putting different variables as different rings. For example, on the first page of sketches, I graphed the total electricity usage of each month in the center ring, months of the year in the middle ring, and the average temperature of each month in the outer ring.
- I also explored displaying the data in a more linear format. On the second page of sketches, I explored using electrical wires to represent each month and splitting the wire into different colors to represent each category of electricity consumption.
- On the third page of sketches, I explored conveying the data in a linear form stacked on top of each other, and having the size of the circles represents the amount of electricity usage for each month. I also explored displaying the data in a more traditional x & y-axis graph.
Digitization of Visualization
For the visualization, I chose bright colors that would create enough contrast when mapped on dark colors like gray and black. I wanted the colors to remind the user of lightning striking during dark/cloudy days or the movement of electric currents.
First Iteration
I explored using electrical wires to represent the different categories of electricity usage by month. In this version, I used color to define the category and length to display total electricity usage of each month. In the second person, I explored using each point of a pentagon to represent the category and color to represent the months. I also added in a temperature indicator on this screen to represent the average temperature of that particular month.
From the feedback session, I identified problems to address for my next iteration:
- Using the electrical wires made each category of usage hard to see, especially for months that had low total electricity usage and the pentagon does a better job of conveying this data since each category’s usage is more clearly labeled. Therefore, I will focus on iterating the pentagon form as the main way to represent category by month.
- The temperature indicator that corresponds to each month doesn’t match well with the overall visualization since there’s no way to compare the temperature with other months. I might address this by adding in a bar graph with all the average temperatures of each month side by side and highlight the month that we are specifically looking at through color.
Second Iteration
I decided to add descriptions and tips to reduce usage for each category as a way to further allow users to critically think about their electricity consumption behaviors. I also edited the temperature graph so that the bars are side by side to compare the average temperature across all months. I also started thinking about micro-interactions such as the description for each category that will display when the user presses on the category. Moreover, what might happen when users hover or press on each temperature bar for each month?
From the next feedback session, I identified problems to address for my next iteration:
- Having the temperature graph display next to the pentagon form doesn’t seem cohesive to the rest of the visualization because of the spacing and also the lack of correlation between average temperature and category of usage. I might address this by adding a toggle button where the user can compare the category of usage by month in one screen and in another screen, the user can compare average temperature and total electricity usage.
- There isn’t enough spacing between the text and the pentagon form. I might address this by reducing the size of the category titles and pushing the pentagon to the right.
Refinements
After testing the previous iterations screens with two participants, I found that the user didn’t even think the temperature was relevant to the topic of electricity usage. They voiced that they would rather see total electricity usage by month on a separate graph. At this point, I decided to pivot and change the graph to display total electricity usage by month.
I also started refining the final screens and user flow. For example, reducing the size of the category titles, pushing the pentagon form rightward, and also pushing the month key up to line up with the “Other” and “Appliances” titles.
Final Prototype
Interactions
To make the visualization more interactive, I decided to add a toggle button that would allow the user to go between screens to view the different types of visualizations
On the total usage screen, I added hover states so that the user could more accurately see the total electricity usage for each month.
On the usage by category screen, I added in hover states for each title so that users know that the titles are clickable. Once the user clicks on a category, the category title also changes to white to indicate that the user is currently viewing the description for that category.
View my prototype here:
