Boomi - data vis

This is a data visualisation created for the Financial Times' company Longitude.

It was created in Svelte with heavy use of custom SVG. Naturally, largest part of this project was mapping the data to the dot positions.

The dot positions are pre-processed from raw json data. I set up a node script that watches for changes in my data-processing files and outputs new data whenever there are changes.

This is a relatively simple approach to optimising performance, as it takes away the need for the client to process this data, instead it can just be selected from arrays based on user interaction.

Performance was always going to be the hardest part of this project, with each user interaction triggering changes to over 1000 nodes. Svelte was a great fit for this project.

Mobile

For mobile users I copied the SVGs generated by the svelte front end, took them into Adobe Illustrator, moved groups around a bit so they would fit better, then exported to PNG. I made use of css scroll-snap to give a nice mobile-friendly feel to moving between slides.