Visualising ministerial roles for the Institute for Government

It started as many things used to with a conversation over on Twitter/X. Philip from the Institute for Government got into a conversation with Christian about some of the visualisation that we had done. He was impressed with the clarity and breadth of our visualisations, and was keen to work with us on some they had in mind.

The Institute for Government (IFG) is an organisation with the mission to make UK government more effective through targeted research and open discussion. One of the things they have done is create visualisations of ministerial roles and the roles that individuals have taken. They use a timeline chart a little like a Gantt chart to visualise this. This had previously been done manually using a graphics template, but they were in the middle of commissioning a new set of visualisations as part of their ministerial database project and needed to automate some of the visualisation. This is when they got in touch with us.

Our typical way of building visualisation sites would not work in this case. Normally we would have all the data upfront and would build a static website using Lume and our custom visualisation library. In this case, the new IFG Ministers Database site was designed to be heavily interactive with such variety in input that the only feasible solution was to build a client side component.

I selected the Svelte framework to create the component as it's one of the more lightweight libraries (compared to, say, React). The code compiles down to fairly efficient native JavaScript, whilst providing some really useful reactive features that we'd make use of. This included being able to select the dimension to colour the bars by, based on either gender, political party or "ministerial rank", and to toggle overlays on or off. I built the component as a library that could be integrated into their main CMS, which was based on Drupal.

Svelte supports building dependency-free assets, which was useful given the code used parts of d3.js (for timeline scale calculations and for colour contrast estimation) and other freely available libraries. These dependencies are optimised using a process called tree-shaking, which aims to eradicate unnecessary code from the libraries integrated. With the addition of a small amount of interface code, the library could be called from any website, including the target Drupal CMS.

I set about building the timeline components, working in short iterations with regular feedback from Philip and the team at IFG. This was helped by having a small test site where the timelines creation and interaction could be tested. Once we were close to feature completeness, I worked with the IFG web developers (Soapbox) to integrate the component with the data. Of course, this integration threw up all sorts of additional requirements which I was able to respond to through discussion.

It was an interesting detour from our typical approach to building sites with SSG, and while we won't veer from that given the significant benefits in usability and carbon efficiency that it brings, we have one or two more tools in our arsenal.

Firstly, I built the test site using Lume, showing that we can integrate components derived from Svelte (or any other approach) in a static site. This allows for islands of interactivity where the need arises. This alone is a useful pattern to have explored.

We also learned how to use some of the more advanced d3 time scale capabilities in an efficient way, and with a small amount of work could port the timeline components to our Lume visualisation libraries.

You can check out the charts in action on the Look up a minister and Look up a ministerial role pages of the IfG Ministers Database.