How to improve legibility of chart with gathered lines?

Question

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.

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.

Answer 1

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

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.

Answer 2

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)

Answer 3

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

Answer 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.

Answer 5

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?

Answer 6

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

Answer 7

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.