Interactive Data Visualisation

Author

Affiliation

Raniere Silva

City University of Hong Kong

Published

August 17, 2022

Welcome

Data visualisation is an important part of scientific communication. Unfortunately, data visualisation in scientific articles are still limited to static images. This projects aims to document ways that researchers can create and publish interactive data visualisations.

Before we dive into how to create and publish interactive data visualisations, let’s define levels of interactive that a data visualisation can have.

iris = FileAttachment("data/iris.csv").csv({ typed: true })

import {interval} from '@mootari/range-slider@1781'

viewof petal_length = interval([0, 7], {
  step: .1,
  value: [0, 7],
  label: 'Petal\'s Length',
})

data2plot = iris.filter((element) => {
  return (element["Petal.Length"] > petal_length[0]) && (element["Petal.Length"] < petal_length[1]);
})

Plot.plot({
x: {domain: [0, 7]},
y: {domain: [0, 3]},
  marks: [
    Plot.dot(
      data2plot,
      {
        x: "Petal.Length",
        y: "Petal.Width",
        fill: "Species"
      }
    )
  ]
})

Level 0 has no interactiveness but readers are still able to do small changes with the help of external software. Level 1 has basic interactiveness like zoom into a region or get precise information from a data point by hover or clicking on it. Level 2 has interactiveness on group level like highlight all points from group or remove a group from the the data visualisation. Level 3 has interactiveness across different datasets.

Table 1: Levels of interactive with data visualisation.
Task	Level 0	Level 1	Level 2	Level 3
Edit title, axis label, and legend	✔️	✔️	✔️	✔️
Pan and zoom axes	❌	✔️	✔️	✔️
Hover over data points and access more detail	❌	✔️	✔️	✔️
Filter group by clicking in the legend	❌	❌	✔️	✔️
Change date	❌	❌	❌	✔️

Interactive data visualisation can be self contained or cloud based. A self contained interactive data visualisation is a single file (usually HTML) that include all the dependencies (usually CSS and JavaScript) necessary to for the reader’s web browser to render the interactive data visualisation. No internet connection is required. A cloud based interactive data visualisation is usually found in the format of a web page that requires some server processing before the reader’s web browser can render the interactive data visualisation.

Acknowledge

This work was sponsored by GigaScience.