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