At VisuallyJs we're big fans of data visualization, and of the concept of the "data-ink" ratio: how can we wring as much informational content as possible out of a given set of pixels, without sacrificing clarity?
We recently updated our FIFA World Cup visualization to make it run with VisuallyJs (it started out as a JsPlumb blog post), and in doing so we made a few improvements, which we're keen to share with people.
To visualize the group stage, people typically use a table like this:
We see, for each team, their flag, name and a list of stats. What we don't see, though, is any of the interactivity between the teams. Who played who? What were the results of the games?
We hit upon the idea of arranging the games in a circular layout, with links between each pair of teams showing the score of their match:
The nodes for each country contain a number of data points:
- Flag
- Name
- Wins
- Losses
- Draws
- Goals For
- Goals Against
- Points
and the border of each country's node is color-coded to indicate their final placing in the group: dark green for 1st place, light green for 2nd, orange for 3rd, red for 4th.
In total, for each country, we've managed to squeeze in 12 data points in what we think is a clear and easy to read format. But we're interested to hear your thoughts! Check out the demo and let us know. And if you want to use it yourself, there's a link to the Github repo (for React, Angular, Vue and Svelte) on the demo page. VisuallyJs is free for non-commercial use.
Top comments (0)