The layout of this diagram was designed by Slashme , and recoded by Alkari to be smaller and easily editable with a text editor.
The code works by defining a seat dot, defining a whole column of dots, and then invoking them at an orderly series of positions. They are divided into groups with the appropriate fill colour. For example, the code for the 20 February 2018 version of this file is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink " width="358" height="213">
<defs>
<circle id="se" cx="4" cy="4" r="4"/>
<g id="co">
<use xlink:href="#se"/>
<use xlink:href="#se" y="10"/>
<use xlink:href="#se" y="20"/>
<use xlink:href="#se" y="30"/>
<use xlink:href="#se" y="40"/>
<use xlink:href="#se" y="50"/>
<use xlink:href="#se" y="60"/>
<use xlink:href="#se" y="70"/>
<use xlink:href="#se" y="80"/>
<use xlink:href="#se" y="90"/>
</g>
</defs>
<g id="Speaker" fill="#000">
<use xlink:href="#se" y="102.5"/>
</g>
<g id="Government">
<g id="Conservative" fill="#0087dc">
<use xlink:href="#co" x="10" y="115"/>
<use xlink:href="#co" x="20" y="115"/>
<use xlink:href="#co" x="30" y="115"/>
<use xlink:href="#co" x="40" y="115"/>
<use xlink:href="#co" x="50" y="115"/>
<use xlink:href="#co" x="60" y="115"/>
<use xlink:href="#co" x="70" y="115"/>
<use xlink:href="#co" x="80" y="115"/>
<use xlink:href="#co" x="90" y="115"/>
<use xlink:href="#co" x="100" y="115"/>
<use xlink:href="#co" x="110" y="115"/>
<use xlink:href="#co" x="120" y="115"/>
<use xlink:href="#co" x="130" y="115"/>
<use xlink:href="#co" x="140" y="115"/>
<use xlink:href="#co" x="150" y="115"/>
<use xlink:href="#co" x="160" y="115"/>
<use xlink:href="#co" x="170" y="115"/>
<use xlink:href="#co" x="180" y="115"/>
<use xlink:href="#co" x="190" y="115"/>
<use xlink:href="#co" x="200" y="115"/>
<use xlink:href="#co" x="210" y="115"/>
<use xlink:href="#co" x="220" y="115"/>
<use xlink:href="#co" x="230" y="115"/>
<use xlink:href="#co" x="240" y="115"/>
<use xlink:href="#co" x="250" y="115"/>
<use xlink:href="#co" x="260" y="115"/>
<use xlink:href="#co" x="270" y="115"/>
<use xlink:href="#co" x="280" y="115"/>
<use xlink:href="#co" x="290" y="115"/>
<use xlink:href="#co" x="300" y="115"/>
<use xlink:href="#co" x="310" y="115"/>
<use xlink:href="#se" x="320" y="205"/>
<use xlink:href="#se" x="320" y="195"/>
</g>
<g id="Vacant" stroke-width="0.3" stroke="#000" fill="#fff">
<use xlink:href="#se" x="320" y="185"/>
</g>
</g>
<g id="Opposition">
<g id="Labour" fill="#dc241f">
<use xlink:href="#co" x="10"/>
<use xlink:href="#co" x="20"/>
<use xlink:href="#co" x="30"/>
<use xlink:href="#co" x="40"/>
<use xlink:href="#co" x="50"/>
<use xlink:href="#co" x="60"/>
<use xlink:href="#co" x="70"/>
<use xlink:href="#co" x="80"/>
<use xlink:href="#co" x="90"/>
<use xlink:href="#co" x="100"/>
<use xlink:href="#co" x="110"/>
<use xlink:href="#co" x="120"/>
<use xlink:href="#co" x="130"/>
<use xlink:href="#co" x="140"/>
<use xlink:href="#co" x="150"/>
<use xlink:href="#co" x="160"/>
<use xlink:href="#co" x="170"/>
<use xlink:href="#co" x="180"/>
<use xlink:href="#co" x="190"/>
<use xlink:href="#co" x="200"/>
<use xlink:href="#co" x="210"/>
<use xlink:href="#co" x="220"/>
<use xlink:href="#co" x="230"/>
<use xlink:href="#co" x="240"/>
<use xlink:href="#se" x="250" y="90"/>
<use xlink:href="#se" x="250" y="80"/>
<use xlink:href="#se" x="250" y="70"/>
<use xlink:href="#se" x="250" y="60"/>
<use xlink:href="#se" x="250" y="50"/>
<use xlink:href="#se" x="250" y="40"/>
<use xlink:href="#se" x="250" y="30"/>
<use xlink:href="#se" x="250" y="20"/>
</g>
<g id="SNP" fill="#fef987">
<use xlink:href="#se" x="250" y="10"/>
<use xlink:href="#se" x="250"/>
<use xlink:href="#co" x="260"/>
<use xlink:href="#co" x="270"/>
<use xlink:href="#co" x="280"/>
<use xlink:href="#se" x="290" y="90"/>
<use xlink:href="#se" x="290" y="80"/>
<use xlink:href="#se" x="290" y="70"/>
</g>
<g id="LibDem" fill="#faa61a">
<use xlink:href="#se" x="290" y="60"/>
<use xlink:href="#se" x="290" y="50"/>
<use xlink:href="#se" x="290" y="40"/>
<use xlink:href="#se" x="290" y="30"/>
<use xlink:href="#se" x="290" y="20"/>
<use xlink:href="#se" x="290" y="10"/>
<use xlink:href="#se" x="290"/>
<use xlink:href="#se" x="300"/>
<use xlink:href="#se" x="300" y="10"/>
<use xlink:href="#se" x="300" y="20"/>
<use xlink:href="#se" x="300" y="30"/>
<use xlink:href="#se" x="300" y="40"/>
</g>
<g id="TIG" fill="#222221">
<use xlink:href="#se" x="300" y="50"/>
<use xlink:href="#se" x="300" y="60"/>
<use xlink:href="#se" x="300" y="70"/>
<use xlink:href="#se" x="300" y="80"/>
<use xlink:href="#se" x="300" y="90"/>
</g>
<g id="PlaidCymru" fill="#008142">
<use xlink:href="#se" x="310" y="90"/>
<use xlink:href="#se" x="310" y="80"/>
<use xlink:href="#se" x="310" y="70"/>
<use xlink:href="#se" x="310" y="60"/>
</g>
<g id="Green" fill="#6AB023">
<use xlink:href="#se" x="310" y="50"/>
</g>
<g id="Independent" fill="#ddd">
<use xlink:href="#se" x="310" y="40"/>
<use xlink:href="#se" x="310" y="30"/>
<use xlink:href="#se" x="310" y="20"/>
<use xlink:href="#se" x="310" y="10"/>
<use xlink:href="#se" x="310"/>
<use xlink:href="#se" x="320"/>
<use xlink:href="#se" x="320" y="10"/>
<use xlink:href="#se" x="320" y="20"/>
<use xlink:href="#se" x="320" y="30"/>
<use xlink:href="#se" x="320" y="40"/>
<use xlink:href="#se" x="320" y="50"/>
<use xlink:href="#se" x="320" y="60"/>
<use xlink:href="#se" x="320" y="70"/>
<use xlink:href="#se" x="320" y="80"/>
</g>
</g>
<g id="Abstentionist">
<g id="SinnFein" fill="#326760">
<use xlink:href="#se" x="335" y="90"/>
<use xlink:href="#se" x="335" y="80"/>
<use xlink:href="#se" x="335" y="70"/>
<use xlink:href="#se" x="335" y="60"/>
<use xlink:href="#se" x="335" y="50"/>
<use xlink:href="#se" x="335" y="40"/>
<use xlink:href="#se" x="335" y="30"/>
</g>
</g>
<g id="Confidence and Supply">
<g id="DUP" fill="#d46a4c">
<use xlink:href="#se" x="350" y="90"/>
<use xlink:href="#se" x="350" y="80"/>
<use xlink:href="#se" x="350" y="70"/>
<use xlink:href="#se" x="350" y="60"/>
<use xlink:href="#se" x="350" y="50"/>
<use xlink:href="#se" x="350" y="40"/>
<use xlink:href="#se" x="350" y="30"/>
<use xlink:href="#se" x="350" y="20"/>
<use xlink:href="#se" x="350" y="10"/>
<use xlink:href="#se" x="350"/>
</g>
</g>
<g id="Suspended" stroke-width="0.3" stroke="#000" stroke-dasharray="2" fill="#fff">
</g>
</svg>
Output
To move a seat from (for example) Labour to Independents, move the positions of the party divisions of the SNP, Lib Dems, TIG, PC and Green up one line (or move dots between adjacent groups).
– FLYING CHRYSALIS 💬 19:05, 26 June 2019 (UTC) Reply