Skip to main content

Maximising the data-ink ratio in a World Cup visualization

· 3 min read
Simon Porritt
Simon Porritt
VisuallyJs Development

Many years ago a manager of mine introduced me to a fantastic book about data visualization, entitled The Visual Display of Quantitative Information, by Edward Tufte:

The Visual Display of Quantitative Information

You should go to a bookstore and buy this book, it's great.

One of the core concepts in this book is that of the "data-ink" ratio - the amount of ink used to represent data vs the total amount of ink used to draw the entire image. There are many examples of this throughout the book, and it's a concept that has stuck with me.

FIFA World Cup​

We recently dusted off our FIFA World Cup Visualizer and released it as an app that people can use in their sites. In this app we're particularly pleased with the group stage visualization, because we think it has a satisfying data-ink ratio:

World cup group stage

For a given team in the group stage, this visualization lets the user track 10 discrete pieces of information:

Stats table​

In the stats table the user can view:

  • The number of wins
  • The number of draws
  • The number of losses
  • The total goals scored by the team
  • The total goals scored against the team
  • The points scored by the team

Border color​

The team's ranking in the group is encoded by the border color:

  • Dark green - 1st place
  • Light green - 2nd place
  • Orange - 3rd place
  • Red - 4th place

Edges​

The edges linked to each team represent the matches the team has played, and they contain the score for each match. The user can see all of the matches played and the individual scores.

Summary​

At a glance, a user can absorb every piece of information about the group stage they need to, in a single place. We're quite pleased with this visualization. Got any comments? Drop us a line via the contact page - we love to chat about this sort of stuff.

In a future post we're going to look at some other ways in which VisuallyJs can be used to create innovative views on a dataset, including a really nifty flight booking component.

Try VisuallyJs​

VisuallyJs offers an extensive list of starter apps, diagrams, charts and dashboards to quick start your development, in React, Angular, Vue, Svelte and Typescript/Javascript.

VisuallyJs - callflow builders, sankey charts, database schemas, ERD diagrams and more
Call Flow
Use VisuallyJs to build a visual Call Flow editor
VisuallyJs - flowcharts, AI Agent builders, chatbots, bar charts, decision trees, mindmaps, org charts and more
AI Agent Builder
Use VisuallyJs to create an advanced AI agent builder
VisuallyJs - leading alternative to GoJS, JointJS, ReactFlow and SvelteFlow
Chatbot
Use VisuallyJs to build a Chatbot editor, with actions, messages, input and choices
VisuallyJs - JavaScript and Typescript diagramming library that fuels exceptional UIs
Flowchart
Fully featured flowchart builder including support for custom shapes, edge routing to avoid vertices, shape resize/rotate, SVG/PNG/JPG export and more
VisuallyJs - callflow builders, sankey charts, database schemas, ERD diagrams and more
BPMN
BPMN editor for modelling the steps of a business process. Pools, lanes, and a full set of task, event and gateway types
VisuallyJs - fully featured alternative to ReactFlow and ngDiagram
ERD
ERD editor for modelling the steps of a business process
VisuallyJs - flowcharts, AI Agent builders, chatbots, bar charts, decision trees, mindmaps, org charts and more
Gantt
Interactive Gantt chart featuring tasks, task groups and milestones
When you've reached the limits with SvelteFlow, VisuallyJs has what you need
Kanban
Fully featured Kanban board. Drag items between columns and use the inspector to update items and columns
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Database Schema
Database Schema builder with support for tables, views, multiple columns types, and column relationships
When you've reached the limits with ngDiagram, VisuallyJs has what you need
Org Chart
Uses the classic org chart layout and provides an inspector from which the user can navigate around
VisuallyJs - JavaScript and Typescript diagramming library that fuels exceptional UIs
Circuit Diagram
Fully featured starter app containing a circuit diagram builder
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
Scada/HMI
Professional and modern Scada/HMI application with fluid, heating/cooling & instrumentation shapes, adhering to the HMI ISA-101 Design Standard
When you've reached the limits with ReactFlow, VisuallyJs has what you need
Mindmap
The mindmap builder highlights several advanced features, such as custom layouts, parsers and exporters
When you've reached the limits with SvelteFlow, VisuallyJs has what you need
Neighbourhood Views
Demonstrates how to include multiple views of a dataset on one page
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
Logic Gates
Fully featured starter app containing a logic gates diagram builder
VisuallyJs - callflow builders, sankey charts, database schemas, ERD diagrams and more
Template
Basic starter app demonstrating how to setup VisuallyJs and its main features
When you've reached the limits with ngDiagram, VisuallyJs has what you need
Area & Line charts
Use VisuallyJs to create area and line charts
VisuallyJs - build diagrams and rich visual UIs fast
Bar & Column charts
Multiple series, stacked, grouped, pivoted, and much more
VisuallyJs - JavaScript and Typescript diagramming library that fuels exceptional UIs
Scatter & Bubble charts
Circle, rectangle, triangle or custom markers, multiple series, fully customizable
VisuallyJs - build diagrams and rich visual UIs fast
Sankey chart
Use VisuallyJs to create a professional Sankey chart, with support for pivoting
VisuallyJs - build diagrams and rich visual UIs fast
Supply Chain Analyzer
Dashboard for managing and analyzing supply chains
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Network Infrastructure
Combine a network management diagram with charts showing projected cost and resource usage
VisuallyJs - JavaScript and Typescript diagramming library that fuels exceptional UIs
Scrolling Lists
Use the ListManager plugin to manage scrolling lists: as elements are scrolled out of the view, their edges are moved to the list container
VisuallyJs - effortlessly build professional node based UIs with Javascript, Typescript, React, Svelte, Angular and Vue
FIFA World Cup
A visualizer for the FIFA World cup - group stages, team journeys and a tournament view.
VisuallyJs - industry standard diagramming and rich visual UI Javascript and Typescript library
Fault Tree Analysis
Combines a fault tree analysis diagram with charts showing risk and list of cut sets