Win-Loss Chart

In this tutorial, we’ll demonstrate how to draw a Win-Loss Chart in Glimpse to visualize the wins (in blue) and losses (in orange) between the various teams in the English Premier League. This chart allows for the display of the win-loss patterns for each team over the entire season, which reveals what teams were the most successful.

First, add in the data by downloading or copying the data from here.

Then, under Visual > Mark in the Inspector panel, set the Mark Type to Bar.


Drag the field History into the X encoding and in the Inspector panel, change the Measure to Nominal.


Then, drag in the Result field into the Y encoding and in the Inspector panel under Visual > Encoding, deactivate Title and Axis.


Also, drag the Result field into the Color encoding to color the blocks based on the wins or losses.


The field Team needs to be dragged into the Row encoding and in the Inspector panel, deactivate Title.


To save a bit of space, open Facet and in Spacing enter 8 pt.


After, go Header > Labels and change the Font Size to 14 pt, the Label Font Weight to Normal, Alignment to Left, and the Angle to .


Finally, go Visual > Layer > Layout > Size and set the Height to 30 pt.


This concludes this tutorial on drawing a Win-Loss Chart. If you want to further customize your chart, please read the documentation.