SPCD3 is an open-source JavaScript library which implements a steerable parallel coordinates visualisation. The visualisation has built-in interactive controls as well as an API which allows the visualisation to be controlled (steered) externally. The library is written in TypeScript and is based on D3.
In addition, a simple example program is provided to illustrate how to use the library and its steerable API. A live version of the latest deployment can be found at https://tugraz-isds.github.io/spcd3.
The SPCD3 library uses the following D3v7 modules:
- d3-dsv
- d3-selection
- d3-drag
- d3-shape
- d3-axis
- d3-scale
- d3-transition
In addition to D3, the following JavaScript libraries are used:
- Mini SVG data: URI: To convert SVGs in data URIs.
- xml-formatter: To prettify the SVG file of the parallel coordinate plot for download.
The task runner Gulp is used to automate repeatable tasks and Rollup is used to bundle and build the library.
Open terminal and execute the following command to install all the dependencies:
npm install
Gulp is used to automate repeatable tasks. The file gulpfile.js defines four public tasks:
clean removes the existing dist/ directory in
order to enable a clean rebuild of the project:
npx gulp clean
cleanAll restores the project folder to its virgin state,
by deleting the existing dist/ and node_modules/ directories
and the package-lock.json file:
npx gulp cleanAll
build creates a new build of the library in three formats (CJS, ESM, IIFE)
and stores the generated library packages into the dist/library/ folder.
Additionally, the example folder is copied to dist/example/:
npx gulp build
serve executes the build task, then additionally executes a private task
called watcher, which starts live web server in the dist/example/ folder:
npx gulp serve
Each of the public Gulp tasks can also be invoked by running the equivalent npm script defined in package.json.
Important: To run the build, a live web server must be started.
As mentioned in the beginning, an example was implemented to show how the library works and what the parallel coordinate plot will look like in addition to the library.
The API Guide lists all available functions in SPCD3's API.
An example application was built to illustrate the use of the SPCD3 library. It is described in the Example Application Guide.
A CSV file is required to visualise a dataset as a parallel coordinate plot. The CSV should be separated by a comma. Otherwise, there are no special requirements. Data dimensions can be categorical or numerical. Three example datasets can be found in folder data. Other datasets should have the same structure.
- Student Marks Dataset
A fictitious dataset of student marks between 0 and 100 for 30 students in 8 subjects. The spreadsheet has a header row and 30 rows of data (records), and 9 columns (dimensions) including the name of the student (Source).
- Cereals Dataset
A dataset with 77 cereals and their characteristics. The spreadsheet has a header row and 77 rows of data, and 15 columns including the name of the cereal (Source).
- Cities Dataset
A dataset about prices and earnings for ~70 cities all over the world. The spreadsheet has a header row and about 70 rows of data, and 58 columns including the city name (Source).
SPCD3 is distributed under the MIT License. See LICENSE for more information.