Preliminary design
Welcome back to our blog! During this week, we have created some initial sketches on the miro board for our data visualization project.
Miro board
We first brainstormed a set of ideas separately and then we discussed with each other to organize and rework on them. Finally, we developed some integrated designs. The whole design space is shown as the following picture.
Sketch
Now let’s take a close look at our ideas for visualizing the building energy performance data. We’d like to share with you some of our initial sketches in the diverge phase firstly.
Sketch 1 is a radar chart which aims to display the average EUI — energy use intensity for a given type of building. Every spoke of the radar corresponds to a specific facility type, and the length from the point on the spoke to the centre of the radar represents the average EUI value of that type of building, and a line is drawn connecting values for all spokes. Since there are two methods to calculate EUI, source eui and site eui, we can present both of them in the same radar chart using different types of lines or colors. It will be easy for us to see how different types of building perform in energy use and whether there is significant disparity when using different eui measures.
Sketch 2 is a scatter plot and it presents the relationship between energy consumption and construction year of buildings. The x-coordinate represents the built year and the y-coordinate is the value of eui. The scatter plot aims to visualize the raw data rather than the average values, but since we have so many data points, it may be difficult for us to present the whole dataset.
Sketch 3 is like a Sankey diagram, and the left is facility type of buildings and the right is energy star rating, and the connection shows how many buildings of certain type fall into a certain range of the energy star rating. Intuitively, the widths of connections are proportional to the amount of buildings.
Sketch 4 is like a combination of Histogram and Line chart, which depict the distribution of a certain variable which could be source_eui ( energy use intensity)/site_eui/floor area.The line above bars show the curve of the distribution.
Sketch 5is a Grouped bubble chart, the size of the circle is determined by the number of buildings while the shade of color indicates floor area.This visualization is particularly effective to show the proportion between elements through their areas.
Emerge
After our independent brainstorm, we worked together to organize and combine our sketches and tried to get some more sophisticated designs. We would like to pick some of them to share in the post.
Emerge 1 consists of a pie chart and a frequency distribution.For frequency distribution, x-axis could be source_eui, site_eui or floor area; For pie chart, variable could be facility type, city or climate. We mix them together, but notice, we focus on quantiles.
Emerge 2 is like a Circular heat map which is inspired by the Group bubble chart and a pie chart.The circle are separated in several sectors,each of which represents each facility type.Each sectors could be divided by several block filled with different shade of color,more dark indicates the higher the energy level, and the size of each color block indicates the proportion of buildings at that certain energy star level.
Emerge 3 is a dotted map which contains information about average site_eui and source_eui of a certain type of buildings built in different years in each city as well as individual information of each building(row data).In this map,red dots represent average level meanwhile green dot is each build.
Emerge 4 combines the group bubble chart and a scatter plot, which shows the relationship between energy star ranking and climate type. The clockwise direction of the semicircle indicates the energy star rating from 1–100. Each dotted line represents a climate type, and the size of the circle represents the proportion of a certain climate type in the star.
Emerge 5 combines bubble graph and general two-dimensional coordinates, which contains several variables, more detailed information shown in picture.
Converge
Finally, we try to feed the emerge phase into several converges, although we try to integrate more variables into fewer graphics, clarity, straightforward and easy to understand is always the most important consideration.
“The greatest value of a picture is when it forces us to notice what we never expected to see.”-John Tukey
Here is converge 1, which could show general performance intuitively, meanwhile it’s a powerful graph to explore our questions initially. Users can click the button to find more detailed information about our datasets.
Converge 2 is an interactive chart, which shows the relationship between the year of construction and the average EUI. By clicking on each circle on the polyline, you can find the specific characteristics of the energy consumption of different building types which were built in a certain year, as described in emerge 2.
Converge 3 is an interactive version of emerge 3. Users can drag the timeline below to observe the energy consumption levels of different climates in each year. We also suppose that more specific content will appear after clicking on each small circle, but this depends on the technology.
Converge 4 is Polar chart.Longitude represents the energy level while latitude represents the year of observation;Different colors represent the building type; Longitude divides the graph into several fan shaped sectors, in the same sector, you can find how the distribution of various type of buildings in the same range of energy levels change in different years. The latitude line divides the graph into several circles. In the same circle, the energy distribution of buildings of different types in the same year can be observed.
That’s it 👏
Thank you so much for reading this article!Found this article useful? Follow us(EnergyDB) on Medium and check out our latest articles.We are always here listening to your ideas and feedback, please feel free to contact us.
