Skip to main content
Open Innovations is winding down and will no longer be commencing new work from May 2026.

Introducing OI Lume Viz

Last year we started creating a visualisation website for Youth Futures Foundation. This was a bit more involved than much of our previous work so we needed to take a bit of a different approach. After some research we opted for the Lume static site generator. Lume lets us build the website using a variety of templating languages and then it generates all the pages as static files.

Lume gives us full control over the generation of the pages which means we can minimise page size; that keeps pages fast and also keeps our CO2 emissions down. Unlike many of our previous single page projects, it also means we can generate visualisations on the server (once) and then just serve up the result directly. It was also an opportunity to make it easier for more of our team to be able to create visualisations easily.

Building a visualisation library

Over the years we've built quite a few lightweight front-end tools to create line charts, bar charts, hex cartograms, SVG-based maps and more. As we were now going to generate visualisations on the server, we started the process of building a library of visualisations in Lume by adapting these existing tools.

Over the past year we've used our Lume visualisation library for the Leeds 2023 data microsite, for the JRF Insight Finder, and for our new UK Constituencies Data site. Each use has helped us improve the code, develop enhancements, and add new visualisation types that we've not used before. We can now create:

The links above take you to samples of each visualisation type. We've added lots of examples with documentation to show you (and remind ourselves) how to make each one.

We have included stacked bar charts despite the inherent issues they have with readability; it is hard to compare the values in any series that isn't the first one. To help alleviate that problem, we've added the ability to highlight one series at a time - and shifting that series to the left - which then makes it look more like a single series bar chart.

Progressive enhancement

In building the library we've attempted to follow the principle of progressive enhancement i.e. we keep as much as possible in the HTML layer with only minimal Javascript to add interactions where needed. If the Javascript fails to load, or has an error for some reason, people can still see the visualisation.

We've kept the front-end Javascript code for each visualisation type in separate files so that a page only needs to load what it actually needs. For instance, line charts use one Javascript file to make the series interactive and one to add styled tooltips; they are under 20kB in total. If the code for the tooltips fails to load that isn't the-end-of-the-world either as we've made sure the tooltip content is embedded in title tags so browsers would still show something.

Accessibility

We've also tried to make sure that the visualisations are keyboard-navagable. That means you can move through the data points/polygons and, if you are using a tool such as NVDA or Windows Narrator, the contents of any tooltips are read out. But forcing people to step through every data point isn't good either. So, each visualisation starts/ends with a "skip link" to take you past it if you are navigating by keyboard.

Another aspect of accessibility is around colours. Our default colour scales/palettes have been chosen because they are suitable for many types of colour deficiency. That doesn't stop someone using their own, non-safe colour choices, but the defaults should be as inclusive as possible.

Where next?

We're continuing to develop the library of visualisations. Every time we use it it brings more insight into better ways of structuring the code or expressing the interface. Sometimes, these changes break what went before and we need to adapt existing sites to use the latest versions. Thankfully the changes are becoming less and less disruptive!

Our medium-term aim is to stabilise onto a version 1 release, managed as a foundational tool in our toolkit. That said, the approach of building sites with Lume coupled with the visualisation library in its pre-release form has already really helped speed up delivery of prototypes and projects within the team. We'd be really interested in your experiences of trying to use the library which you can access on the deno.land third party modules repository.