Following diagram represents results of election, grouped by province, and then by parties. Interactivity is also introduced for hovering over legend, as displayed in the picture: (here is also live version)

enter image description here

The color scheme for parties is given and cannot be changed (maybe only slightly). (Those are real "official" colors of the parties in question.)

My dilemma is should I devise color scheme for provinces too, and use these colors for their circles, and in legend for provinces, or it would be too many colors for this diagram?

It looks to me that the UX problem here is two types of categorization (parties and provinces), and how to use color in such cases.

  • If you think your users will be going to search for provinces and not find them easily, why don't you display them in their natural (geographic) order? Put Nova Scotia to the east, Yukon to the northwhest, etc.
    – Rumi P.
    Jan 23, 2014 at 11:16
  • @Rumi P. I am going to implement hover interactivity for province legend too for this purpose. (This is just development version of the diagram) The diagram should "free" the user from geography, conveying relative size of provinces, in terms of seats allotted in election - that's why I don't want to use map. Also, some organic feel should be conveyed - hence bubbles, curves, etc.
    – VividD
    Jan 23, 2014 at 11:25
  • Maybe you misunderstood. I didn't suggest that you color the outlines of the provinces on a map with the party colors, but that you arrange your existing circles into the same order as you'd find them on a map. A user can't be "freed" from geography completely - she has expectations ingrained from years of learning. If you have to support a visual search query, you should put elements where people expect them.
    – Rumi P.
    Jan 23, 2014 at 11:37
  • @Rumi P. I understood you, but this diagram is a kind of exploration, so I wanted to stay away from map, on purpose. That said, I am considering that user can dynamically switch between this circle-like layout, and map-like layout, all with province circles intact (as you described), just moving around. But I plan this for "phase 2". :)
    – VividD
    Jan 23, 2014 at 11:44
  • @Rumi P., the idea of the diagram is to put in the center the most important provinces from the point of view of seats allotted to them, and then this rule: the province has the smaller number of seats, the further it goes to the periphery, in general. There is actually a "spiral" in the diagram, that goes from Ontario, to Quebec, to BC, and all the way to the provinces that have only one seat.
    – VividD
    Jan 23, 2014 at 11:50

3 Answers 3


If you want to use a different color for each province, it will be a heavy overload of colors. So I wouldn't use different color's for each province.

But I would change the general color of the province's on the graphic. Two of the circles are blue, so if you use also blue for the titles, the "bubbles" doesn't stand out of the titles.

You need a color which is not similar to the already used colors. And the only one you don't use would be yellow. And yellow is a really bad color for using on a white background.

What I would use is a dark grey for the titles. Something like #454545. And on your province list I would color the short-name in the same color like the title and the full-name in a classical black.

So this would look like:
enter image description here

Just note: the darker the title, the more it stands out. And because the "bubbles" are the important part of the graphic, the title shouldn't be out standing, but must be easy readable.


Using same feature (color) for the different categorization isn't good idea, as it brings complexity in perception and decoding.

I think you could try some changes which help to recognize the states at the diagram (see my picture):

  1. Use state abbreviations, which are clear to recognize, using contrast, placement, orientation
  2. Use state surrounding circles in more visible way. They enclose each state and convey the idea clearly
  3. Use alphabetical ordering of the states in legend

enter image description here

  • Thanks for the insight. As far provinces (states) are concerned, I can't change the order in legend, since it is "natural" order of canadian provinces - from west to east (with some exceptions of northern scarcely inhabited teritories). People in Canada are used to this order while reading various reports.
    – VividD
    Jan 23, 2014 at 10:33
  • I am also curious how come you made your version of the diagram so quickly? Did you use programming? Or editing a svg pic? :)
    – VividD
    Jan 23, 2014 at 10:35
  • You might also consider displaying this information on top of a simplified Canadian map. You already hinted that the information displayed is sorted by their location on a map.
    – jff
    Jan 23, 2014 at 10:51
  • @VividD, you've provided source code, I've hacked it ;). Natural order of the provinces has great sense, I didn't know it. Jan 23, 2014 at 11:37

You have a few possible graphical patterns to express that several entities belong together:

enter image description here (source: Colin Ware, Visual thinking for design)

You have already used color with one meaning. Overloading color with a second meaning would make the cognitive effort for extracting information from your graphic much higher. So I think that the "common color region" solution should not be used in your case.

You are already using "enclosing contour". I like Alexey's suggestion of making this more obvious, by strengthening the contour. I would also add a "proximity grouping" to make it even more clear which entities belong together, which simply means that I'd put more whitespace between provinces.

Another matter you didn't mention in your question: the order of the information. When people look for information, they need some order, or they get lost. Sometimes information has a natural order, and then you should use it. I would strongly recommend structuring your graphic layout in the same way the provinces are geographically structured on a map. This doesn't mean that you have to make your elements the same shape as the provinces, or that you have to exactly follow the distances and sizes of provinces in your layout. But the relative position between province data can be made the same as on a map, helping your users orient themselves without losing the curved aesthetics of the graphic.

Update I just saw the comment about a "spiral" you posted while I was writing the answer. It is an interesting idea, but I personally didn't notice it, and from the other answers, it seems that others didn't notice it either. Maybe you could use more whitespace again, to make the spiral. But it is very unusual for a spiral to have its largest elements in the middle; practically all natural spirals have the smallest elements in the middle (take a look at a nautilus shell, or at the spiral of square roots). So I think it will be hard to make this well visible, unless you make the elements much smaller, so the geometric information becomes much more salient than the colors and the shape of each individual feature. But in this case you would be deemphasizing the information on the detail level, which is probably not what you wanted to achieve.

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.