7

I manage a website which displays the evolution of sport teams in their championships using line charts. See the image below with 2 examples for 2 sports. The X axis show the played matches (time), and the Y axis is the number of points of the teams.

  • the top chart is a volley championship, where teams gain between 0 and 3 points at each match.
  • the bottom chart is a basket championship, where teams gain 1 or 2 points at each match.

2 example charts

Live pages: volley and basket .

My problem is that the chart on the bottom is much less readable, because there's less difference between teams. The lines are often overlapping.

Any ideas and suggestions to improve the chart in this case ?

EDIT:

The chart is at the top of the page. Below the chart is a ranking table, some stats for each team, and filters to show only some part of the season, or compare only home results, etc... The goal of the chart is to show the evolution of points/ranking of the teams throughout the championship.

Thank for all of the suggestions. They're mainly focused on highlighting one of the teams, and that's definitively something that I should do. Still I'm looking if there's a better way to display the bottom chart, where the lines are squeezed and there's a lot of empty space.

4
  • @Mayo You're right on your assumptions. I've added links to the live pages.
    – Baldrick
    Jan 9, 2015 at 17:48
  • Added another comment. Leaving for a meeting. won't be back until later.
    – Mayo
    Jan 9, 2015 at 18:11
  • Thanks for the chart idea. I like it a lot and will use it in the future. As mentioned in my post I think it is excellent in showing a few very distinct lines but doesn't scale well.
    – Mayo
    Jan 12, 2015 at 14:48
  • Did you try relative points? That means, divide actual points earned per team by either the maximum they could have earned if winning all matches or by the points of the best team. The result should be similar to your (more useful) “classement” option.
    – Crissov
    Apr 4, 2016 at 8:11

7 Answers 7

6

Consider selective highlighting when user hovers or clicks on items on the graph.

NYT does a good job of this in their interactive data visualization. http://www.nytimes.com/interactive/2015/01/06/upshot/how-nonemployed-americans-spend-their-weekdays-men-vs-women.html?abt=0002&abg=1

showing NYT interactive highlight item behaviour

In your case, seeing all the lines together is beneficial to allow the user to see patterns and trends in the data. You already have hover behaviour to display more information about specific data point when they hover. Consider taking this further by highlight the data line of that data point, move the line to the top of the z-index stack and mute the colors for the remaining lines.

4

A multi-line bar chart could work as long as there aren't more than 12 teams. It's really hard to distinguish between more than about 16 colors (true of any chart)

multibar

4

There could be a kind of subway approach to the lines, by making the lines go along each other instead of overlapping:

enter image description here

4

Interesting presentation. I'm really intrigued by this display.

Just to make certain that I understand it. ASS SPORTIVE DE MONACO (Blue line on upper left of top chart) is undefeated and didn't play on day 8 and VOLLEY-BALL STADE LAURENTIN didn't win it's first game (or get its first point) until day 6 and hasn't won since.

I'm not certain that this graph type can be much improved on unless you allow users to remove teams from the graph.

Looking at the second graph I wonder if I truly understand the underlining metrics (unless it's like American Sports where an Eastern Conference or Division plays other Conferences.

I look at (and create) charts all day and I find your charts somewhat overwhelming (at first glance). I can see it working very well with a few teams but it doesn't scale well. If you can't allow users to remove and add teams then I wonder if this presentation will work. EXAMPLE: user starts with "his" team (assuming logged in and selected) and the league average. Two lines are very easy to work with. And then he can add other teams (best, worst, best over last X games, his conference, etc...)

What other chart types have you looked at?

EDIT:

I think this is an excellent attempt in showing relative ranking over time however I don’t think this scales well. It is difficult to find 10+ different colors that stands out against every other color. For instance the lower right (day 5 – day 9) is difficult to read at a glance. I had to focus on the graph to distinguish that which line represented Olympiques Antibes Juan Pins. I think this works well in showing the relative standings over time of two team, maybe a 3 or 4, but I don’t think it’s working well at 10.

What do your users want? Will your users want to put in the energy to compare all these teams? I know my users wouldn’t.

The purpose of graphs is to make absorbing data quick and easy; as well as reducing complexity and ambiguity. I think this is an excellent idea but that it doesn’t scale well.

This doesn’t mean that it shouldn’t be used – only that its use ought to be limited to where it improves the readers ability to absorb information.

I see this working well, for instance, where you compare a team to its previous year’s pace. This year could be in red, last year in black, the year before in dark gray, etc…. There are an infinite variations on a theme that can go here especially if the team is close to a record pace and you show this year’s point total with the record total. In that above example multiple lines work because this year's line would be a very different color and will be incomplete - hence will stand out. The other lines would be historical, not change over time, and will be "background" information.

To recap and answering your question: I think this a great design for showing total points over time but that it doesn't scale well. The solution is to use it where it’s appropriate and not force it where it’s not.

3
  • On the second chart, the loosing team still get 1 points (the lowest line is a team that lost all its matches). The difference between the 2 charts is how the points are counted (depends on the sport, the 2 examples here are french championships rules). On the first chart, a team which would have lost all its match would stay at 0 (horizontal line).
    – Baldrick
    Jan 9, 2015 at 17:52
  • It's already possible to "highlight" one of the teams (by clicking on the them in the legend). I'll look into the possibility to hide some of the teams. There is no logging on the site, so all the teams are visible on load.
    – Baldrick
    Jan 9, 2015 at 18:36
  • I've mainly looked at line chart because it shows the evolution of the ranking throughout the season. I may try some sort of "distorted" chart (where the horizontal line would be the points of team that lost all its matches, or some sort of radial presentation, not sure yet if it's understandable).
    – Baldrick
    Jan 9, 2015 at 18:37
2

A fast hack would be to highlight the line/team you click and render all others gray. I presume people want to see how one of the teams is doing, right? Do you have some data on how people use this graphs, what are they interested in?

1

How about a toggle feature? That would give your users control over the data set that is most important to them. By removing a data series that is less important to them, it would give them a better way to hone in visually on the ones that matter most.

Here is an interactive example for you to try: http://www.zingchart.com/playground/run/54b69c1664bcf

You could also use a JavaScript charting library that would automatically adjust the scale based on the remaining series, like this: http://www.zingchart.com/playground/run/537ce29a599b6

0

I guess in the end it is always going to be hard to fit lots of things on a fixed space, so you really have to work out exactly what you want to focus on or accept that trying to focus on everything means that you can't really focus on anything.

There's been lots of good discussion and contribution on this question, and I'd like to throw in another possibility that you might want to explore.

Often in these situations you can take the opposite approach and take the small multiple approach, which I think might work well in your situation. It is often seen in the implementation of sparklines, but it also works well for graphs that are simple and have well-defined axes.

Just google small multiples and see if anything strikes your fancy, and if you can provide more details I am sure you'll get a more detailed answer as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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