Interactive InfoViz | Group of 4 | Contribution: Data Collection, Concept design, Interaction Flow, Development

Ready to move?

Comparing and ranking different cities on liveability metrics

The visualisation compares 35 US cities on 17 different metrics across ease of moving around [Transportation], cost of living, quality of neighbourhood, living quality [#music venues, #coffee shops, etc] and employment statistics. The metrics are chosen based on its relevancy and  importance for young adults if they were choosing among multiple cities. They are able to have the overview as well as detailed comparison among several cities they focus on.

Problem Description

Choosing between multiple cities to live in could be a daunting task specially for internationals who are new to the foreign land or young adults looking to relocate when starting the next chapter of their lives.They may be considering more than one option, however, finding and comparing information about the cities and picking one is both resource and time intensive. The viualisation is aimed to help young people especially new college graduates who are considering relocation or people who just want to know more, explore, compare and rank different cities.


Data was collected from multiple sources like US Census Bureau, Bureau of Labour Statistics,, etc. This multivariate dataset with 17 variables was cleaned and normalised for 35 US cities. The variables were all quantitative and included metrics around Transportation, Quality of Living, Cost of Living, Entertainment and employment statistics.

Design Alternatives

We started with who are the users of the system and what would be some questions they would seek answers to from the visualisation. We abstracted these questions into atomic tasks. We looked at various visualisation techniques for multivariate data sets to seek inspiration. We held multiple brainstorming sessions and came up with multiple designs lke stand-alone exploratory systems (Dus and magnet), multiview representation of data and some insipired from the theme of daily and casual visualisations.

Some of these were hard to implement or did not resonate with the target users i.e. they found some designs very technical and not friendly. Others did not help fulfilling representative user tasks. based on the feedback received, we iterated our design and settled for a co-ordinated circular chord diagram.

Visualisation Description

The interface of the visualisation offers various elements to explore the underlying content. The three major components are Controllers, Chord Diagram and the stacked bar chart.


These are checkboxes to select between multiple metrics and Cities.

Metric selector: It acts both as a color legend and selector. For the legend, pastel colors are used for 17 metrics since it is a good choice for large number of metrics.

City Selector: Cities can be selected from the alphabetically ordered list or from the US map which shows the spatial location of the cities. The list and the map are linked and making a selection on one highlights and selects the corresponding city on the other.

Circular Chord Diagram
A custom circular Chord diagram is used to show how each cities compare across different metrics. The selected metrics are placed on left side and cities on right side. The width of the edges/chords represent the normalised value of the metric and color represents the metric itself. The city is represented by the arc and is composed of the selected metrics. The wider the arc for the city, more better it is among the selected cities. The diagram supports the following interaction:

Hovering: Hovering each path shows the actual values of the metric for the city. Hovering on the city arc highlights all the chords of the selected metrics for the city and hovering on the metric arc highlights the chords for various cities for that metric.

Add and remove: Users can add or remove metrics and cities to the diagram by using the controllers.

Chord Diagram

Stacked Bar chart
The stacked bar chart is used to rank all the cities according to the selected metrics. The cities are placed along the x-axis and different metrics are stacked upon each other. The height of each tile is based on the normalized value for the metric. The height of the bar is calculated by adding up the tiles. This view supports hover, similarity and sort functions.

Hovering each stack shows the actual values of the metric for the city.

Selecting any city highlights all the cities based on its similarity with the selected one. Opacity values are used to represent similarity. Higher opacity corresponds to higher similarity. Similarity is calculated using the standard deviation of all the other cities compared to the selected city.

Upon clicking the “Sort button”, cities are sorted and arranged on x-axis based on the sum of the normalised values of the selected metrics. Thus, this view also gives a sense on distribution of all the cities for the selected metrics.

Learning outcomes

We came across many problems while implementing the interface. Choice of colors was crucial since we had a multivariate independent dataset. The data was not similar i.e a high value of average income meant a better city but a high congestion level did not. Chord diagram didnt prove well to compare values bt only gave a spatial sense of how the cities compared. This was taken care of by the stacked bar chart but normalisation made stacks very small to to visually compare. Overall, the visualization lacked in comparing all the cities across all the metrics in an efficient way.

Suggested changes to these problems:
Replace Chord diagram with other multivariate visualization technique which allows better exploration and is well accepted by the target audience. Also, Redesign the stacked bar chart for better understanding of the represented data.