Parallel Coordinates Explorable Explainer (PCEE)

An explorable explainer which guides a reader through an interactive tutorial about parallel coordinates. This is a single page web application (SPA) built using Vue3.

A live version of the latest deployment can be found at https://tugraz-isds.github.io/pcee.

Dependencies

The explorable explainer uses SPCD3 to generate and visualise parallel coordinates.

Scroll-driven animations are implemented using native CSS. For browsers and platforms that don't yet support it, a fallback is provided using GSAP as a polyfill.

Getting Started

Prerequisites

Open terminal and execute the following command to install all the dependencies:

corepack enable
yarn install

Compile and Hot-Reload for Development

yarn dev
or
yarn exec vite

Building the Web App

Gulp is used to automate repeatable tasks. The file gulpfile.js defines three public tasks to build the web app:

build creates a new build of PCEE and stores the generated files into the dist/ folder:

yarn build
or
yarn exec gulp build

To run the example, a live web server must be started in the folder dist/.

clean removes the existing dist/ and package/ directory in order to enable a clean rebuild of the project:

yarn clean
or
yarn exec gulp clean

cleanAll restores the project folder to its virgin state, by deleting the existing dist/, package/, node_modules/ and src-tauri/target/ directories:

yarn cleanAll
or
yarn exec gulp cleanAll

Each of the public Gulp tasks can also be invoked by running the equivalent yarn script defined in package.json.

Building a Native Desktop App

Prerequisites: To build a native desktop app, Rust, Cargo and Tauri 2.0 needs to be installed.

tauri builds a native desktop app with Tauri 2.0 and copies the generated artifacts to package/.

yarn tauri
or
yarn exec gulp tauri

cleanTauri removes the src-tauri/target/ directory to enable a clean build of the native desktop app:

yarn cleanTauri
# or
yarn exec gulp cleanTauri

Licence

PCEE is distributed under the MIT Licence. See LICENSE for more information.

Contributors

• Keith Andrews kandrews@iicm.edu
  Project Leader.

• Romana Gruber
  Master's Thesis, main developer.

• Florian Zollner
  Bachelor's Thesis, usability evaluation.

• Philipp Drescher, Jeremias Kleinschuster, Sebastian Schreiner, Burim Vrella
  InfoVis SS 2023 G1, prepared original students dataset.