Fantastic graph made by d3
Welcome to our blog! After one week hard working, we made several interactional chats with d3.We post our d3.observable below which contains full charts and code. Enjoy it!
Prologue
Introduction
In this blog we only focus on showing description of our final design project as well as conclusion brief.
Video
Final design (sketch to realization)
Interactive map
https://public.tableau.com/app/profile/kellyshieh/viz/mapwhole/Dashboard1
This map shows the distribution of energy consumption in certain cities/regions in the United States. In this interactive map, you can see that each city/region is divided by postal code, and the color depth represents the average source eui of the administrative area . The pie chart on each administrative district represents the percentage of energy consumed by different types of buildings. Since the map is interactive, you can select any city/region you want to observe. In addition, you can also filter by the construction year of the building.
Sketch to realization
Radar Chart
Radar Chart shows how different types of buildings perform in their energy consumption. The facility types are represented by a sequence of equal-angular spokes. Here we have 14 types after aggregation on the original dataset. The length from a circle on the spoke to the center represent the average value of site/source eui of the specific type of buildings, and smooth lines are drawn connecting the values of site/source eui separately for each spoke and are distinguished by different colors.
Sankey
This parallel sets chart aims to visualize the relationship between the class of buildings and their energy performance. The thickness of each curved line represents a quantity that is subdivided by category. The categories of energy performance are derived from the energy star rating score which ranges from 1–100. A score of 50 represents median energy performance, while a score of 75 or higher indicates your building is a top performer — and may be eligible for ENERGY STAR certification.
Polar chart overview
We can get some information from Star Map.The star map is an interaction graph which can show the detailed information of each building, which also gives a general performance of thousands of observations in 2017. Longitude represents the year while latitude represents the energy level. The color represents the facility type, while the radius of the point represents the floor area. We also have scatter plots above to visual this relationship.
Scatter Plot
The scatter plot show how all observations distribute in two dimension built year and index energy, grouped by climate, class, facility type and state. Actually, any index of energy performance could be chosen.Our design can filter variables flexibly. Beside getting information about building’s performance in different floor area, we can find buildings number in each area level as well as energy level, and find the difference of each climate, facility type, state and building class.
Boxplot
We also draw box plots to visualize relationships between categorical variables and numeric factors.
Zoom chart and tidy tree
It is interesting to summarize how many building classes and facility type in one city. Zoom Chart shows the distribution of building class and facility type in our dataset. Purple represents commercial building class and corresponding facility types, while green represents residential building class and facility type. The angle of the arc indicates the number of corresponding type of buildings, and service type dominates in our sample.The Radial Tidy Tree also shows this type distribution structure clearly.
In doing our project, beside explore question planned, we also using our design try to find other secrete about our data, we explore performance difference in climate and state as well as cities.We can find this result in tableau map, scatter plot, boxplot. The Plot overview is an beautiful graph which shows how observations distribute in two dimensions: electricity EUI and fuel EUI.Fuel EUI is not shown on our database so we calculate it by using functions given on office website.The color of points represents value, and we give it meaning which matches our real life.
Design for our photo
