31st Dec, 2019Gareth Simons

If you arrive at this page looking for the official PsyMaptic Dashboard, then please follow this link instead: https://www.psymaptic.org/. The following discussion provides a brief overview of the visualisation and is not intended as an official portal to the webpage.

## PsyMaptic Interactive Dashboard

Psymaptic Dashboard

The PsyMaptic web dashboard is a project I completed for the PsyMaptic Team at UCL Psychiatry. They are doing some interesting research and have created the PsyMaptic prediction tool to forecast the need for early-intervention in psychosis care in England.

The dataset is spatial and spans hundreds of data-dimensions, which presented some interesting challenges:

• We were fairly determined to avoid the need for a backend server, so opted for hosting the web tiles via Mapbox. To reduce the time to ‘first-paint’, the data is packaged into arrays (rather than objects) and loading is phased so that the webpage appears almost instantaneously (assuming a good broadband connection).
• The large number of data-dimensions is presented through four different view-modes (chart, explore, compare, combine) and five different categories (type, year, age, sex, ethnicity). The data can be displayed in counts or rates, and the view-mode can be set either from the main dashboard or from a dropdown menu which provides a more detailed overview of available data.
• The interlinked map, dashboard, and data table can be filtered by name, min, or max to drill-down into a specific location or range of values.
• The tech-stack consists of mapbox-gl / vue / D3 and provides for smooth interactivity. What I’ve found interesting is the changing roles for different packages in respect to DOM manipulation, meaning that with the emergence of highly reactive frameworks such as vue (and react) there is a shift (for me at least) to using the reactive bindings baked-into vue — which essentially exists for this purpose — while using D3 for just about everything else visualisation related, i.e. chart scales, ticks, colour manipulation, etc.