A Web Framework for Explainable and Malleable Visualisation

EuroVis 2024

Authors

Simon Malthe Hansen, Ira Assent, Hans-Jörg Schulz

Submission Video

Shortening the gap between pre-processing and view

A picture of a Chart with a view, and both the visual and data model open — A Chart with a Scatterplot view alongside the visual model to the left and data model to the right. The user can create as many Charts as they want.

In the data visualisation pipeline the gap between visualisation and pre-processing is often large. This makes it hard for visualisation authors to understand how their visualisations come about, and make quick changes to all parts of the pipeline. The web-framework solves this by combining malleability in both the visualisation and pre-processing steps.

The main component of the framework is Charts. Charts are highly malleable and contain a single, customisable view and a separation of data and visual models. The data model of each Chart is fully editable and executable Python code, which does the algorithmic pre-processing of the data before handing it over to the visual model. The modifiable visual model in turn transforms the data into visual marks, which creates the view. The high malleability of Charts makes modifying them a seamless part of interacting with them. This puts the author in control, lets them see and understand the effects of small changes, and shortens the gap between the visualisation and pre-processing steps of the data visualisation pipeline.

Charts are based on the Reference Model design pattern and built with Svelte , PyScript and the Monaco Editor.

Case: The Political Compass

A picture of a two Charts side by side, with the left using t-SNE and the right using PCA — The Political Compass when made with (left) t-SNE and (right) PCA differ a lot.

To showcase the web framework we have created a Political Compass visualisation of the Danish political spectrum from the 2022 general election. The data set is based on 35 questions answered by 855 political candidates, which is reduced to 2 dimensions with Dimensionality Reduction Techniques. By creating two Charts from the same data set and putting them side by side, the framework makes it obvious to the visualisation author, how the choice of pre-processing algorithm affects their visualisation.

A picture of a Chart with nodes hidden and both high- and low-dimensional edges bundled and shown — The Political Compass made with t-SNE with the kNN of the dataset before Dimensionality Reduction in red and after in blue.

We can show the k-Nearest Neighbours from before and after Dimensionality reduction by creating two sets of edges and setting the visual model to show and bundle the edges. This lets us as visualisation authors understand and explain just how much the pre-processing algorithm in question (here t-SNE) has changed global structure, as can be seen in how much the red edges differ from the blue ones.

Citation in BibTeX

To cite this article, we encourage you to use the following bibtex entry in your citation manager:

@inproceedings{Hansen2024_webframework,
  booktitle = {EuroVis 2024 - Posters},
  editor = {Kucher, Kostiantyn and Diehl, Alexandra and Gillmann, Christina},
  title = {{A Web Framework for Explainable and Malleable Visualisation}},
  author = {Hansen, Simon Malthe and Assent, Ira and Schulz, Hans-Jörg},
  year = {2024},
  publisher = {The Eurographics Association},
  ISBN = {978-3-03868-258-5},
  DOI = {10.2312/evp.20241080}
}