0

I'm looking for a solution for how to represent two different values on a single marker on the map.

Background: I am building a real estate site where a key feature is showing results based on travel time, not distance. i.e. based on how long it takes on the train, bus or car instead of how many miles on kilometres it is.

In the current solution the user can provide more than one travel destination (e.g. within 30 minutes from office A and within 20 minutes from office B) however on the results map we show marker colour based on travel time to office A only.

Screenshot:

enter image description here

I'm seeking ideas for how to represent visually travel times for two or more locations - or at least for the two. As an example of ideas:

  1. Use an inner circle and then an outer ring to represent the colours for the two locations
  2. Use a single colour and it represents the "combined" travel time for the two. e.g. if both are 15 mins or less, show it as green, if one is 15 minutes and the other 20 then show it as yellow, etc.

I worry if solution one will show up well enough - especially for the locations with smaller dots - and I worry that solution two is not intuitive.

By the way, I experimented with color brewer combinations but couldn't find any that looked good for this purpose, so I've stuck with the green-yellow-orange-red approach to coloring.

Here is the map legend:

enter image description here

|improve this question
  • I think a better way to clarify the question is to define what you want (the user) to achieve, and what information you want to represent. I am still a bit unclear what the intent of the visualization is... – Michael Lai♦ May 2 '15 at 0:06
  • Size represents availability/frequency - i.e. how often matching apartments are available. Colour represents travel time. The problem is (for example) a married couple have two offices, and currently we are representing the colour/travel time for one office, not two. The goal is to visually indicate the travel times if they have more than one office/location. – rgareth May 2 '15 at 14:46
  • If you use size to represent availability/frequency, then what is the unit that you use to report on it? And how easy is it for people to actually compare availability using size? I would have thought colour would be better for this. If you use colour to represent travel time then it is only a qualitative measure and you need to provide categories of travel time (e.g. 1-5min, 5-10min, 10min+). – Michael Lai♦ May 2 '15 at 21:23
  • I've added the map legend to the original question – rgareth May 3 '15 at 11:24
  • Using sizes for matching leases per year is not the best visual representation because it doesn't scale (i.e. what if there is a large range of values? what happens if there are two points that are very close and both represented by large circles). It is also difficult to make a quick visual comparison because the area of the circle doesn't match the magnitude of the values. Using a fixed size circle and put the value in the middle of the circle, while using both colour and fraction of the circle to indicate relative contribution to total travel time might be a better approach. – Michael Lai♦ May 3 '15 at 12:40
1

Would something like this work:

Travel Time

The idea is the main circle has up to 3 time minutes displayed to show a quick look of what the different times are for travelling. On click, or perhaps on hover, 3 circles expand out showing the different travelling times for the different modes of transport.

This is just an example and would need refining.

|improve this answer
  • Unfortunately, I think the circles on the map (shown in screenshot) are too small to fit detailed numbering. I like the idea of the radial popup though and will think if that can be incorporated. – rgareth Apr 29 '15 at 10:09
  • You can refine this design by using the outer ring as a donut chart and each of the travel mode as fractions of the entire circle. – Michael Lai♦ May 2 '15 at 0:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.