This is a web framework run on the local machine, which aids in making explainable visualisations by creating a higly malleable visualisation environment. For more information see the project website.

Disclaimer: This is a very early version. Therefore bugs, crashes and other issues are to be expected. Make sure to save the loadout often. The save-functionality is also in its early stages and the same savefile should not be loaded from twice.

The web framework uses Node.js and Svelte so ensure to have these setup beforehand.

When first setting up run:

npm install .

The framework can then be run with:

npm run dev

and is accessible at localhost:5173 from the browser. The framework has been tested on Google Chrome.

Datasets should be placed in /static/datasets/your-dataset-here.json. Datasets must in JSON-format.

Charts can have children. The first Chart in every family is set up with template code to load the dataset into the Python environment. This is done with Pandas by default. You are free to change this however you want, but if using the default functionality then ensure the JSON is compatible with Pandas loading from it.

Children can access their parent's chart-object with chart.parent. Such as:

nodes = chart.parent.nodes

Every Chart must initialise a chart-object in its Python code.

The Python code should always return a chart-object with at least the nodesJson attribute being set, with specific attributes. It is recommended to create a Pandas-table with the following layout:

It is then recommended to run:

chart.nodesJson = dataframe.to_json(orient="records", lines=True).splitlines()

This puts it in the correct format used by the visual model.

The following chart attributes are also important to keep in mind:

• chart.dimensionality: Set to 2 if you want to show a 2D-visual

• chart.firstEdgesJson: JSON of a set of edges between nodes. Should be of the format:

  {src: source_node_id, dst: destination_node_id}

• chart.secondEdgesJson: Same as above

• chart.useFirstEdges: Set to true if using the first set of edges

• chart.useSecondEdges: Set to true if using the second set of edges

• chart.firstEdgesTitle: The title of the first set of edges in the visual model

• chart.secondEdgesTitle: The title of the second set of edges in the visual model

• chart.colorMap: A map of Category -> "#ffffff" hex-colours.