Cost of Living in the United States


One of the most important factor for studying in another country is the cost of living. A student would have to determine which university is most affordable by considering its location and referencing data that may or may not be sufficient or accurate. Given the increase of foreign students entering the U.S., this project hopes to make this information more accessible and actionable to support the increasing foreign student population.

Although this kind of information could be accessed through a search engine, it may be more difficult to synthesize such information from multiple sources. Therefore, an information visualization was created to achieve these three goals:
1. Simplify the digestion of data for determining a personal budget.
2. Deliver customizable cost of living information to help international students discover which locations meet their budget.
3. Enable cost comparisons between different cities in the U.S. as well as more granular comparisons between items of priority.




Primary purpose of this visualization is to help international students who intend to attend college in the United States to easily identify affordable cities and choose ones that fit their financial situation. Tableau software was used to create the visualization. Dataset used was the Cost of Living Index (COLI) 2015 from The Council for Community and Economic Research (C2ER). The dataset provides other detailed information that realistically contribute to total cost of living other than rental price, such as cost of grocery, healthcare, utilities, entertainment, etc. These costs can be opted in or out into the calculation depending the student’s personal lifestyle needs when analyzing the cost of living on the visualization.



This visualization shows an overview of costs between selected cities. Users are able to broadly explore the data without having to drill down or up prematurely. Users could filter individual items and reflect that change within the visualization.

Hover = Details on demand
When hovering on the map, information about each state’s monthly cost of living will be presented as a tooltip. Additional data for monthly cost will be displayed when users hover over the bar charts representing different cities, the different categories of cost of living, and the individual items within the categories.

Click on = View more detailed information
The layout of the presentation has been arranged in the hierarchy of interaction that follows the Shneiderman’s interactive design principle, where information will progressively be presented to user. This requires the user to click on the visualization that is first available (the map) which will subsequently progress into the city bar graph, the different categories, and then the comparison button/link in the tooltip to reach the detailed comparison of the selected cities.

Our visualization presents the four important information from the chosen dataset: location, different categories of costs, the individual items, and cost for the individual items. Since the purpose of this visualization is to enable broad exploration, it is appropriate to display more varied data to help users understand the range of expenses.

By progressively disclosing information using Shneiderman’s principles, the visualization effectively fulfills the primary use cases.
Overview = In accordance to Shneiderman’s mantra, this visualization defaults to the overview of total costs at the state level where users can get a broad understanding of how cost of living differs among states.
Zoom = Then users can zoom into city level data and select cities of interest, which reveals cost of living in a city as well as cost associated with the categories for each city.
Filter = Clicking on category icons shows a list of items contained within its category. Users can filter unnecessary items to produce more personalized visualization.
Details on demand = Users can get specific details by hovering over a bar. Clicking on a bar within the category breakdown reveals a bar chart to the right which graphs all items contained within the category.
Compare = To accomplish the goal of this visualization, we added in ‘compare’ feature to allow users to decide which city is affordable for their budget.

Compare cost of living

Compare cost of living


Personalized total cost of living

Personalized total cost of living


Data Dimensions
State name = nominal
City name = nominal
Category name = nominal
Item name = nominal
Cost per item = quantitative
Cost per city (sum) = quantitative
Cost per category (sum) = quantitative
Cost of living per state (sum) = quantitative

Data Encoding
Length = cost of items; cost of category; cost of living for entire state
Area = area outlines state boundaries
Color = city name; items belonging to each state;
Value = cost of living (per month) variation between states



These sketches show the planning on how to structure the flow of interaction and ideation for the visuals. Early prototype was created using Adobe Illustrator and Keynote to have a quick round of usability testing. The design decisions implemented on the interactive visualizations shown above has been made to adapt to Tableau’s features and functionality.

Planning interaction flow per Shneiderman’s interactive design principle

Rough ideation

Early prototype

Early prototype

Early prototype

Early prototype

  • Interface, User Experience
  • 2015
Top of Page