(f)airbnb: an interactive visualization of housing in sfo

Fairbnb is an interactive web based visualization that strives to answer the basic question: what factors influence pricing of Airbnb rentals in San Francisco? 

problem description and users

The goal of our visualization is to compare the prices of Airbnb housing listings with Trulia estimates to see price markups in San Francisco. Airbnb is an online platform that enables people to rent houses or rooms, while Trulia is a real estate website that lists properties for. With our visualization, a tourist can make a better-informed decision on where they choose to live and avoid being a victim of price gouging. Residents of San Francisco can understand the presence of Airbnb units and their prices across different neighborhoods. Finally, potential hosts can have a baseline comparison for pricing their rentals.

Some questions that our visualization can address include:

  • What is the distribution of prices and markup values in San Francisco?

  • What is the most or least expensive neighborhood or listing in San Francisco?

  • Is there a correlation between rating and markup/price?

  • Which listings have a specific amenity?

  • What are the common features of a selected group of listings?

  • Can I find a listing in Marina that has a fireplace, and costs around $200 a night?

**In order to provide a valid comparison between Airbnb and Trulia, all Airbnb listings included in our visualization are whole home/apartment listings.

Team and Role: Team of 4 masters students, 2 design and 2 from Computer Science. I worked on interaction, linking and brushing, feature and overall interface design for the visualization along with my fellow teammate. 

Click here to use FAIRBNB! (Available with a built in tooltip tutorial and help for each pane in the visualization.)

interface overview

Below is a quick rundown of Fairbnb's interface. We kept this to a simple one screen interface, to throw focus on all the brushing and linking's possible. Brushing and Linking was the main strength of our visualization. Also, our goal was to answer as many analytical questions as possible, using Fairbnb, as mentioned above.


The map shows median values of daily listing rentals per neighborhood using color. Selecting a neighborhood creates brushings across other views. The details view displays details like average price and common amenities of the listings selected.


The Price Blocks at the bottom, show the distribution of prices & markups of a selection of listings. The width of the blocks denotes the number of listings that fall under it. You can explore a price block by selecting individual listings inside them, that highlight the corresponding markup of that listings as well.


The Scatterplot can be used to view individual listings, or aggregate them into neighborhoods. The attribute on the X axis can be changed to view correlations of various attributes against the markup percentage. You can drag over and select multiple marks on the scatterplot, as seen below.


Filters can be used to show elements that fit a certain criteria, and hide all other elements (in grey). The Selection panel, on the other hand, shows the set of listings that is currently highlighted across the views. Below, we see a selection (highlighted in red) applied over a filter of 5 neighborhoods. Certain selections built by interacting with the viz can be converted into Filters as well. This was a new distinguishing feature we built into our visualization to help users drill down into specific insightful selections.