Team Formation Chart: transform organizational unit people via XSLT into SVG football team graphic

The Input: a HR-XML OrganizationalUnit

We start with a named, structured list of people in an XML format. It could be almost any format, but here we choose HR-XML's Organization 2.5 schema, with an OrganizationalUnit of (say) five to eleven people. They will be processed in document order (so the first will always be the goalkeeper of our football team), and one of them could be identified as the manager, who will be our captain.

The structure of the Organization document is roughly:

  • Organization
    • OrganizationName
    • OrganizationalUnit
      • OrganizationalUnitName
        • PersonMember
          • PersonName
            • FormattedName
          • PersonRole (leader?)
        • PersonMember

and so on.

The Transformation: an XSLT stylesheet using a separate XML document to hold formations

A separate XML document was created to hold the formations, using a format like this:

<teamFormation xmlns="">
<position><start x="0" y="0.2" /></position>
<position><start x="-0.75" y="0.4" /></position>
<position><start x="-0.25" y="0.4" /></position>
<position><start x="0.25" y="0.4" /></position>
<position><start x="0.75" y="0.4" /></position>
<position><start x="-0.75" y="0.6" /></position>
<position><start x="-0.25" y="0.6" /></position>
<position><start x="0.25" y="0.6" /></position>
<position><start x="0.75" y="0.6" /></position>
<position><start x="-0.25" y="0.8" /></position>
<position><start x="0.25" y="0.8" /></position>
<!-- and so on. -->

An organizational unit can be matched to a formation with the same number of people/players. The x and y axes are zeroed at top-centre on a vertical pitch, where ±1.0 horizontally reaches the touchline and 1.0 vertically the half-way line. This allows plotting on any size of pitch.

The XSLT takes the input Organization and extra team formation documents, tries to find a formation whose number of positions matches the number of people in the OrganizationalUnit, and lays out player shirts in position over half a football pitch.

The player shirts have:

  • numbers (1 to whatever);
  • names (from PersonMember/PersonName/FormattedName);
  • a captain's armband if the person has a PersonRole with leader attribute set to true;
  • a grey colour if they are the goalkeeper;
  • styles (including optional hoops and stripes) that can be activated through external, alternate CSS style sheets.

The Output: the SVG team formation chart

Here is a live output in SVG (you may need a browser like Firefox to see it). You should be able to change the strips via the alternate style sheets (in Firefox: View > Page Style).

Jane Jackson 1Dusty Lore2Mental Grime3Gray Homespun4Ann Angler5Bob Buccaneer6Claire Cutlass7Dan Doldrum8eFish-in-Sea Committee

An alternate stylesheet for a particular team might look like this:

/* Barcelona */
.shirt {fill: #113D7A;}
.hoop {display: none;}
.stripe {fill: #7B1832;}

As well as setting the shirt colour, the optional hoops and stripes can be coloured or hidden with display: none.

Sample bitmaps

Here are some sample bitmaps generated (shown at 50% size, click for 100% versions).

Graphic of a 3-2-2 football formation with blue shirts.Graphic of a 4-4-2 football formation with blue and purple striped shirts.Graphic of a 2-2-2 football formation with red and yellow hooped shirts.


This software is now available under an open licence on the Github repository sleepingdog/chart-craft.

Last updated: 2016-06-13.