0

I'd like to display an array of various location points, that share the same group. I've been tasked with designing a visual UI that houses a Bing Maps screen and displays several (location based - geocoordinates) map pins according to their group. I originally thought each pin should be connected via a line (like a web) to illustrate their relation and literally "connect" them or group them together. Each group would be differentiated by color.

This idea is feasible, however, when rendered it just looks messy. So many lines! I also thought about just coloring the pins the same, but it's a bit too difficult to see their relation.

Any ideas would be very very appreciated. Thanks!

Improve this question
1
  • I'm getting hung up on what problem you're trying to solve. What data does the user need? A quick visual of locations of a type of thing? Or a sense of the relationships between city pairs? The answer would help me think of a solution. Because @Navot might be onto something with his chord graph example, where geography is not as important as some other factor.
    – LindaCamillo
    Nov 26 '14 at 19:48
1

A clear way to demonstrate groupped locations in a full size map is to provide a fix positioned list of your groups in a corner of the map, each group name has a color, assign that color to the pins related to each of those group names, default transparency for pins must be about 50-60%. Then once you clicked on a group name, the group name title can get bold and pins related to that group name can get 100% of the color in the map.

You can also try only using the trancparency and don't need to necessarily use multiple color, but you need to have one of those groups selected in the beginning to let users know what happens if a group name becomes selected.

Improve this answer
0

I'm thinking about a super-complex situation - a dense, interwoven web of points.

There might not be any neat way to both make the group visually distinct and not make the screen messy.

If this is a desktop app, perhaps try to use very low-contrast lines to connect the points, and "light-up" the group (points and lines) on mouse-over.

Consider this example from D3 for reference: http://mbostock.github.io/d3/talk/20111116/bundle.html

The circle can hypothetically be extremely complex. Something not even the nice swirly lines can save. I think in this case, the lines' role in the screen changes.

They shift from displaying connections and relations to portraying overall connectivity. You can't understand a single connection, but you get a strong sense that there (this many) connections. You can even sort of point out the "strong" nodes.

If this is relevant, consider trying something similar for your map.

Improve this answer
2
  • Hmm. Kind of a neat display. I'm really interested in how they got each line to arc parabolically from node to node, while being "pulled" to the center of the circle. It's almost like a gravitational or magnetic pull. Obviously, those lines are rendered via some algorithm. Anyways, I don't think that concept would work very well on my map, but it got me thinking...
    – Justin Ward
    Nov 26 '14 at 17:48
  • I was only referencing it's complexity so I didn't really analyze, but I guess it's force-distributed somehow. Maybe with gravity towards more connected nodes? Anyway, note how complex the network is and how eleganttly easy the mouseover functionality makes focusing on a single group. Getting a feel for the overall connectivity isa bonus.
    – Navot
    Nov 26 '14 at 20:50
0

Why not use different coloured marker icons to show relationships between different markers on the map?

E.g. all the green markers belong to the same group.

Or even have custom marker shapes if the groups have a specific context.

Improve this answer
2
  • I had the same idea, but some clients will be displaying maps with close to 100 groups. ie) 100 different colors. Way too many color bindings.
    – Justin Ward
    Nov 26 '14 at 17:14
  • 1
    Hmm 100 groups seems complex no matter how you differentiate them. Perhaps the answer is a series of filter controls that segment which marker groups appear at any one time.
    – Devin
    Nov 26 '14 at 21:00

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.