Messaging: In the quest for the ideal car, the challenge lies in striking the perfect balance between performance and budget considering the diversity of everyone's financial situation. Separating affordable daily drivers from high-performance machines becomes crucial. In this page, we analyzed data from various car makes and models from 2017, offering insights into how different engine types and car makes impact fuel efficiency. Our aim is to empower prospective buyers with the knowledge to make informed decisions, finding a car that not only satisfies their driving desires but also fits their financial constraints while promoting fuel efficiency.
Narrative Structure: I've used Martini glass structure in this page. There are in total of 6 scenes from different categories of engines. The last scene combines all previous five scenes to give the viewer an overall conclusion. The viewer also have the option to access previous pages included the updated annotation after they have went through all the pages.
Visual Structure: The visual structure of this page is Martini Glass narrative visualization. The view will navigate the viewer to the next scene until the last page. The viewer will not be distracted by other things on the page. On top of the page is the text telling the reason why to show these charts to the viewer. The chart at the bottom explain the detail of these texts. The scene divides the data into different charts, each chart focus on one of the cateory. With less data in each chart, viewers can focus their attention on the specific information presented. This prevents cognitive overload and makes it easier for them to absorb the insights. Every time the viewer switch to next scene, there will be an updated annotation from last page. As viewers move from one screen to the next, the updated annotations remind them of the key insights and takeaways from the previous screen. This helps in maintaining context and enables a smooth flow of information.
Scenes: The first scene gives us a view of MPGs of gasoline engine with less than 4 cylinders. This scene is placed first in the narrative because it represents the majority of people's budget choices. Most vehicles in the market or on the road fall into this category, as they are often more affordable and fuel-efficient for everyday use.
The second scenes gives us a view of MPGs of gasoline engine with 6 cylinders. This scene highlights the premium option for those who are willing to invest more in a higher-powered vehicle with better performance. It comes after the first scene to demonstrate an upgrade from the budget choice, catering to consumers who seek improved performance without venturing into the top-tier luxury segment.
The third scene focuses on the MPGs of gasoline engines with 8 cylinders and above, representing the top tier of vehicle options available in the market. These vehicles typically offer superior performance and power, but they come at a higher cost both in terms of initial purchase and fuel consumption. By positioning it at the third, the visualization leaves the audience with a strong impression of the range of options available, from budget-friendly to top-tier luxury.
The fourth scene presents data on the MPG of vehicles equipped with diesel engines. Diesel engines are known for their fuel efficiency and high torque, making them a popular choice for certain types of vehicles, such as trucks and some SUVs. Placing this scene after the gasoline engine scenes allows for a comparison between gasoline and diesel options, showing the potential benefits of choosing diesel in terms of fuel economy.
The fifth scene shifts the focus to electric vehicles (EVs) and their energy efficiency. EVs have become increasingly popular due to their environmentally friendly nature and the continuous improvement in their range and performance. By showcasing the MPGs equivalent for electric vehicles, the visualization highlights the efficiency and low operating costs of EVs compared to traditional gasoline and diesel engines.
The last scene presents a visualization that combines all the data from the previous scenes. It includes the MPGs of gasoline engines with less than 4 cylinders, 6 cylinders, and 8 cylinders and above. Additionally, it showcases the fuel efficiency of diesel engine vehicles and electric vehicles. This all-inclusive scene allows the audience to make direct comparisons between all engine types and clearly see the advantages and disadvantages of each option. At the same time the navigation buttons will show up on the top which allows viewer to view previous scenes again. It would enhance the user experience and allow viewers to easily revisit specific scenes of interest.
Annotations: I put the average MPG as the annotations in all the charts based on their category. In the first three charts, I put two lines which represents average city mpg and average highway mpg for gasoline engine vehicles in different color. When we switch between different charts, the position of the line will change based on the y axis, but the actual value will not change. When we move to diesel engine chart and electricity engine chart, the color of previous annotations will change to gray since they have different value of average MPG in their engine category. If viewer want to switch to previous scenes they can find the gray annotation from the new scenes. The change in color to gray for the annotations effectively differentiates among engine categories. This visual cue helps viewers understand that the values are not directly comparable across different engine types, reinforcing the uniqueness of each category's data. Furthermore, allowing viewers to switch between scenes and find the previous annotations in gray form is a thoughtful and user-friendly navigation feature. This way, viewers can easily refer back to the previous scenes and track how the average MPG values compare between different engine types.
Parameters: Engine Type: A parameter that allows users to select different engine types (gasoline with less than 4 cylinders, 6 cylinders, 8 cylinders, diesel, electric, view all). Each engine category represents a state of the narrative visualization. Based on engine category, we can filter out data, visualize them in the chart, and lead the viewer through the story.
Triggers: The triggers that connect user actions to changes of state in the narrative visualization are the buttons above the chart. Specifically, the "Next" button allows viewers to navigate to the next scene, and the change in the y-axis position of annotations reflects the corresponding data change for the selected engine category. The appearance of additional buttons after going through all the scenes affords users the option to select and view specific scenes again. This empowers them to make detailed comparisons between different engine categories. The tooltip box that appears when the cursor is moved over the data points provides an affordance for viewers to access detailed information about a specific vehicle. This interactive feature allows users to inspect data without cluttering the visualization with excessive details.