Overview
Moving to Massachusetts is an interactive visualization that allows users to highlight, filter and display data about each town in the Commonwealth based on the criteria which is most important to them. Selecting a town to live in is one of the most important decisions you have to make when moving to a new state. Although this decision is difficult under the best of circumstances, it becomes even more challenging in a state with the unique characteristics of Massachusetts, which has hundreds of towns in a small geographic area. This problem was encountered by both members of the project team when moving to the Commonwealth: the greatest challenge was determining in which towns to focus our housing search. It would have been invaluable to have access to an interactive resource which aggregated multiple points of data about Massachusetts communities when making this important decision.
Click here for a larger version of this picture.
The visualization can display and filter town data on the following search criteria:
- Home Prices
- Home Price Variance
- Property Taxes
- Public School Standardized Test Scores
- Commute Times
- Access to Public Transportation
The typical use of this visualization would be for a user to discover a short list of towns which match their preferred search criteria. Attempting to search real estate listings without specifying a town is not very productive. The primary goal of the visualization is to greatly reduce the list of towns which best meet a user's criteria and then explore those towns in more detail with a realtor.
Motivating Questions
The purpose of our visualization is to help answer the following simple questions:
- Which towns have a median home price that fits my budget?
- Which towns have the most stability in housing prices over time?
- Which towns have the lowest property taxes?
- Which towns have public schools which score highest on standardized tests?
- Which towns report the shortest average commute times?
- If I have found a town that meets my most important criteria, are there any other towns with similar characteristics?
Target Audience
The target audience is families who plan to purchase a single family home within Massachusetts. Users will have a general idea of which of the five main categories of housing prices, price variance, property taxes, public school scores, and commute times are important to them.
Visualization and Interaction Methods
Look and Feel
When we each went through this analysis manually a number of years ago, we found that the process was very paper-intensive. We wanted to re-capture the feeling of this experience by making the visualization look like a map, notes, and paper tacked up on a corkboard.
Click here for a larger version of this picture.
We chose to render the detailed town data using a form somewhat unique to Massachusetts: the "Entering" sign. These signs can be seen on most state roads as you cross town borders.
To continue this theme, we decided to display town data in a form which are similar to highway services signs (i.e. gas, food, lodging). The icons on the signs were created in Adobe Illustrator from hand drawings with the exception of the MBTA bus and rail icons.
Map
The map of Massachusetts with town borders is the primary focus of the visualization. The user is able to choose up to two data series to plot on the map simultaneously, hover the cursor over a town to display more information, and select a specific town to see other towns with similar characteristics.
The user will also be able to zoom any labelled region in order to better see the towns there. This is especially important in eastern Massachusetts since towns along the coast are small and tightly packed.
Zooming to a Region
Due to the density of towns in the Commonwealth, the map has the ability to enlarge the display on a specific area of the map.
Zooming behavior is controlled by the 'masking tape' labels on the outer edges of the map. There are seven defined zoom regions on the map:
- Greater Boston
- Cape and Islands
- Southeast
- Central
- Berkshire
- Pioneer Valley
- Northeast
Hovering over a label will draw a red line around the outside of the zoom region:
Clicking on a label for a region will zoom the map on that region. The towns which comprise this area will appear larger and the towns outside of this region will paint with a muted stroke but no fill to provide context for the user but no interactivity. The zoomed towns will respond to mouse movements and clicks but the towns outside of the zoomed region will not.
Click here for a larger version of this picture.
In addition to the larger map, a description of the geographic area will display. This will provide the user with some basic information about the region. Clicking on this region will return the user to the main map.
Town Details
Additional details about a town will be displayed as a popover window when the user's mouse enters the town's borders. If a filtering criteria has been applied, an indicator whether an individual field matches the filter will be displayed.
All of the data collected for each town is displayed on the window:
| Town Name | Name of the town. |
|---|---|
| Incorporation Date | Year that the town was incorporated. |
| Median Home Price | Based on actual sales dating back to 1987 and adjusted for inflation. |
| Price Variance | Variance based on actual sales dating back to 1987. |
| Median Tax Bill | Annual property tax bill. |
| MCAS CPI score | Composite Performance Index for public middle schools grades 3-6. |
| Median Commute Time | Commute time based on survey conducted by massinc.com and UMASS. |
| MBTA stations | Based on latitude/longitude coordinates of MBTA bus, subway, and rail service. |
This data is fairly self-explanatory, with the possible exception of price variance. Price variance is the standard deviation as a percentage of the median home price. This provides a good indication of how stable a given town's prices are. The lower the number, the more stable prices are over time. To ensure the data series spanned multiple boom and bust cycles, housing price data was collected dating back to 1987. Even with this long timespan, the price bubble that the local housing market experienced over the past 5 years caused the data to trend upward. As an example, Acton's price variance score is 18% and Arlington's is 24%. An extreme example is Provincetown. Prices in Provincetown were relatively stable in the late 1980's at around $300k (adjusted to today's dollars) and remained so until 1999. The median price increased greatly between 2002-2004 and is currently $725k. As a result, the calculated price variance for Provincetown is 49%.
Locating Towns with Similar Characteristics
If the user clicks on a town, then the town will fill with a yellow color to indicate that this town has been selected and all similar towns will remain colored while all dissimilar towns will turn transparent and fade into the background. The town's name will also be highlighted on the match list to the right of the slider group.
Towns are considered similar when their data places them in the same Brewer Square category represented in the legend. The user can change the selected town by clicking on another town or clear the selection by clicking on the selected town again.
Color Legend
The legend of colored squares at the upper left of the visualization represents a "Sequential / Sequential" 3x3 color matrix for up to 2 dimensions that are being encoded on the map. One dimension is plotted vertically in the legend and one is plotted horizontally. The data for a specific town determines the color that will be used for the town's area. This technique was described on Cynthia Brewer's site; the selected color pallete comes from one of the examples presented. The color legend is referred to elsewhere in this document as "Brewer Squares".
The below example illustrates plotting the average commute time vertically and the median home price horizontally. The lower left cell represents the lowest values for each dimension and the upper right cell represents the highest values for each dimension.
The range for each cell is indicated by the labels that appear next to that cell. The 'less than' and 'greater than' symbols are used to convey the range of values each cell represents. Individual ranges can be set by the user using one of the slider controls described below. It is important to note that having a fixed division of equal thirds is not practical for a number of the dimensions being plotted. Home prices in particular do not lend themselves well to even distribution since this would result in division points of $500k, $800k, and $1.1M. It seems more likely that the use case would have a user set the low point, middle and high points to reflect their individual financial situation. As the user changes the division points in the slider, the labels in the legend will update.
Whenever the mouse enters the legend, the number of towns being painted with that color on the map will appear within the cell. This number reflects only those towns that match the criteria that was set with the filters and the zoom.
Clicking on the axis labels will reveal a menu which allows the user to change the dimension that is being plotted on that axis. The user can elect to plot the same dimension twice or select two different dimensions.
Clicking on a square within the legend will highlight all of the towns on the map in that color and select the first town alphabetically. It is the same result as if the user clicked on that town in the map.
If a user only wants to color the towns on the map using only one dimension, this can be achieved by selecting the same category for both the x and y dimension.
Slider Controls
Each dimension that is eligible for rendering on the map will have a corresponding slider control. The slider control consists of a label and a rectangular bar with three divisions.
The image above shows the initial state of the slider controls with their labels and three divisions within each bar. Each division displays the range of values within that division. The user is able to resize these divisions by dragging the vertical dividers to the left or right. Putting the mouse near the dividers causes arrows to appear above and below the bar to indicate that dragging is now enabled. Dragging the vertical divider to the left or right resizes that region and updates the labels within the bar, the legend, and possibly the colors for towns on the map.
The user can render the data for up to two slider controls on the map. This rendering will be done with a color scheme displayed on the Brewer Square control listed above. Each slider control can be plotted on the horizontal or vertical axis of the color legend.
Filtering
Each of the main search criteria (housing prices, variance, taxes, commute time, public schools) has the ability to filter out a range of values. The indicator of a filter on a slider control is a set of red triangles at the top and bottom of the bat. The user can apply a filter by clicking on the red triangles and dragging to the right or left.
If a user is not interested in filtering on a specific criteria then the slider filter can be disabled by sliding it to the "off" position (either to the extreme left or right of the control) and the filter will not contribute to the search criteria.
As an example, if you applied a filter on Property Taxes:
The towns that match the user's filter criteria will be painted with a color that corresponds to the data being plotted. Towns that do not match the filter criteria will be painted in a muted red. The user can optionally select to paint the map with up to two data sets without any filtering.
The result of applying the filter can be seen here:
Click here for a larger version of this picture.
If you hover the mouse over one of the filtered towns, you will see a town information screen with additional indicators of why this town was filtered on the map. In this case, you can see Acton was filtered since the Property Tax fell outside of the range of filtered values.
The user can set a maximum or minimum value for the slider as a way of filtering towns that do not meet the minimum or exceed the maximum set. In the case of home prices, commute times, and property taxes, the user can set a maximum value for the slider. In the case of school scores, the user can set a minimum value. The max or min value is set by dragging an arrow that's on the right or left side of the bar. The arrow is only visible when the mouse enters the slider region for setting the filter. The red checkerboard pattern indicates values that have been filtered out from the data set.
Displaying Towns Served by Mass Transit
The last row of the slider control group applies special filters on whether a town is serviced by MBTA buses, subways or commuter rail. The checkboxes form a logical 'OR' filter for the towns. Checking "Rail" and "Bus" will result in listing towns that have a commuter rail stop or bus stops. The screenshot below displays all towns which have a commuter rail stop:
Click here for a larger version of this picture.
The user can choose whether or not to apply any of the mass transit filters to the map.
Match List
With no filter applied to the map, the default behavior of the match list is to display an alphabetical list of all Massachusetts towns. When a filter is applied to the map, the match list only displays the towns that meet the criteria.
Clicking on a town name on the match list has the same effect as clicking within town boundaries on the map; highlighting the selected town in yellow and displaying similar towns. You can scroll the list by clicking on one of the arrows on the right of the list or by using the mouse wheel.
Visualization
Attribution
- PolygonUtilities.java: from Chistopher Furman. Downloaded from: http://local.wasp.uwa.edu.au/~pbourke/geometry/polyarea/PolygonUtilities.java. Used for displaying an indicator on the map when a town is missing data.
- org.json.*: from http://json.org
- Colorbrewer.org: used to determine best color scheme to use to render data on the map of Massachusetts.