spaJS User Guide

Overview

spaJS is an interactive / data-driven / visual / online tool to conduct Structural Path Analysis (SPA). It has been developed from scratch and it is written in modern JavaScript (JS).

spaJS applies the technique of backwards scanning a network of transactions among the sectors in a given economy to retrieve all paths (or supply chains) which are deemed significant in terms of their contribution to the total impacts quantified by a given (environmental, social) indicator (or flow). Significant paths are defined in terms of a user specified threshold (or pruning) value relative to the total impacts, and are searched for up to a maximum order (or tier), also specified by the user.

spaJS features a simple, self-explanatory interface designed to guide the user step by step by enabling only those features that are appropriate for the chosen settings. spaJS has been inspired (*) by pyspa (written in Python) and the need for more freely available open source tools to conduct SPA.

spaJS is currently in its open beta version. We welcome feedback from the community, including suggestions for improvements, additions, bugs, etc. See Contact.

spaJS has been tried and tested in the following browsers:

Our recommended browser is based on a number of performance tests.

(*) spaJS borrows some of the conventions adopted by pyspa, such as the names of some input files and their structure. The intent behind this is to allow the use of either tool with the same input data sets (subject to minor modifications).

spaJS comes with a fully functional Environmentally-Extended, Multi-Regional Input-Output dataset. Currently, this dataset consists of a compressed version of the full GLORIA (2018) dataset, referred to as GLORIA25, which spans 25 sectors across 164 regions, and one environmental indicator (green-house-gas emissions). The GLORIA25 dataset is available for download (zip format, 34 MB).

Did you know?

The OAASIS project and spaJS have been recognised with the Innovation Award at the 2023 Anti-Slavery Freedom Awards organised by Anti-Slavery Australia.

Features

spaJS allows to:

Limitations

Usage

The workflow with spaJS can be broken down into three stages:

  1. Data Input
  2. Scanning Parameters
  3. Save / Visualise Results
These stages are explained in turn. Please consult our adopted definitions and conventions. All the examples that follow are based on a dummy dataset and are only relevant for the purpose of illustration.

1. Data Input

User Input Data

spaJS requires the user to upload four input text files in comma-separated-value format (CSV):

The format of each of these files is detailed below (Input File Structure).

The required files are uploaded one by one via the upload buttons (Screenshot 1.1).

how to load user data
Screenshot 1.1: User data loading interface. Input files are selected one by one via each of the buttons.

Note that the files must be named as shown to the left of each button. This quirk is intentional in order to avoid the user from potentially uploading the wrong file, e.g. an Input.csv file where a A_matrix.csv file is expected. Note that the files are not checked for content other than their size, e.g. A_matrix.csv is expected to containt \( N + 1 \) rows (see above) and \( N \) columns; in turn, all other files are expected to contain \( N + 1 \) rows. If any of these conditions is not met, spaJS will display a browser alert.

After choosing a file, its name appears next to the corresponding upload button and the field next to it indicates that the file has been fully (100%) uploaded (Screenshot 1.2). To load the file data onto the browser's memory, simply click the button. To clear all the chosen files, press the button. Note that the data can be loaded onto memory only upon uploading all required files.

how to load user data
Screenshot 1.2: User data loading interface. Each uploaded file is indicated next to its corresponding button. The files can be loaded by pressing the button (shown in focus). Pressing the button clears all uploaded files.

Default Input Data

As an alternative to the option to load custom input files, spaJS provides a built-in default dataset: The GLORIA25 dataset, a compressed version of the full GLORIA (2018) dataset, which spans 25 sectors across 164 regions, and one environmental indicator (green-house-gas emissions). The GLORIA25 dataset is available for download (zip format, 34 MB).

To directly load the built-in default data set, simply check the box at the top of the interface. The user upload interface is disabled, and once all files have been automatically loaded, the user is directed (via element focusing) to the relevant input menus, starting with the 'Choose a region' menu (Screenshot 1.3). Note that in this case, the file name is not indicated next to the corresponding button, but the field next to it does indicate that the file has been fully loaded (compare to Screenshot 1.2).

how to load default data
Screenshot 1.3: How to load the default data set. Simplye check the box at the top (indicated by the top arrow). The fields to the left indicate that the file has been fully loaded (100%; red rectangle). Once all the files have been automatically loaded, the user is directed (via element focusing) to the relevant input menus, starting with the 'Choose a region' menu (indicated here by the bottom arrow). Note that, depending on file size and internet connection speed, this action may take a few ten seconds up to minutes.

For slow internet connections, we recommend downloading the default dataset to disk and then load it via the user input interface as explained above, rather than loading it directly as a default data set.


2. Scanning Parameters

Once the input data is loaded onto memory, the input menus and input fields that define the scanning parameters (region, sector, order, indicator, pruning threshold) are automatically populated, although only the 'Choose a region' menu is enabled at this point (Screenshot 2.1, left). For the sake of illustration, here we will use a dummy data set, consisiting of four fictitious sectors across three fictitious regions (AAA, BBB, CCC). The user is asked to:


3. Save / Visualise Results

Upon completing the scanning, spaJS displays a summary of the results in tabular form (Screenshot 3.1). The table informs the user about: (1) the total number of significant paths compatible with the scanning parameters; (2) the number of maximal paths (see Definitions); (3) the aggregated monetary value and its coverage relative to the target sector's \( x \); (4) the aggregated footprint and the its coverage with respect to the target sector's \( m \). In this context, 'aggregated' refers to the result of adding up the corresponding flow quantity for all retrieved paths. The units of the value and of the footprint correspond to the monetary units and the indicator units as given in the file Infosheet.csv. Note that the footprint coverage is always less or equal than the maximum footprint coverage indicated in the 'SPA diagnostics' table (Screenshot 2.4b, right column), as it should.

Summary of results
Screenshot 3.1: Summary of the results in tabular form. The total computing time (in milli-second) is also shown (here highlighted by the red rectangle). Note that this may vary from system to system, browser, scanning parameters, etc.

The next step is to cast the results into a CSV structure containing the paths ranked in order of decreasing footprint which can be downloaded as CSV file or visualised (or both). This is done simply by clicking the button (Screenshot 3.2, top). By default, spaJS includes all paths (4671 in this example; see Screenshot 3.1); thus the 'All paths' radio button is checked by default. However, the user is given the choice to select only a subset of paths. The subset can be defined either in terms of footprint coverage or in terms of ranking (paths are ranked in decreasing order of footprint). The footprint coverage is entered as a percentage, with possible values between 0 and 100, e.g. 50., while the rank is entered as an integer number \( p\) between 1 and the total number of paths (in this example 4671), e.g. 15, indicating the wish to select only the first \( p \) top-ranked paths from the list. Either of these is achieved by checking the 'Top Ranked Paths' radio button and entering the value of the coverage or \( p \) in the corresponding field, and pressing the <enter> key (Screenshot 3.2, middle-top, middle bottom). Alternatively, the user may choose to select only the maximal paths by checking the 'Maximal Paths' radio button (Screenshot 3.2, bottom). Note that if no maximal paths are found, this button is disabled.

create a CSV structure select top-ranked paths select top-ranked paths select top-ranked paths
Screenshot 3.2.Select all paths (top) or select only the paths with a specified coverage (middle-top; here using 50% as an examples), or the \( p \) top-ranked paths (middle-bottom; here \( p = 15 \)). or the maximal paths (if available; bottom). In either case, a downloadable, visualisable CSV structure is created upon pressing the 'Create CSV' button (shown in focus).

Once the choice has been made among either all paths, the paths with a specified coverage, the \( p \) top-ranked paths, or the maximal paths (if available), the CSV structure is created by pressing the button (Screenshot 3.2, bottom, shown in focus). This action triggers two subsequent actions: (1) it enables the 'Visualise' and the 'Download CSV'; (2) it displays a sample of the path list in tabular form (Screenshot 3.3). In this example, we have chosen to include only the 15 top-ranked paths.

Display a CSV structure
Screenshot 3.3. A sample of the CSV path list in tabular form appears after pressing the button.
The sample table (as well as the downloadable file) consists of eight (8) columns:
  1. item (type string): A concatenation of the target sector's name (downstream endpoint) and its corresponding region, e.g. 'Sector 3 | BBB'. Its value is identical for all entries in the table.
  2. path (type integer): An ID assigned to each path. Paths along a common 'branch' of the tree hierarchy are assigned the same ID (see Visualisation).
  3. tier (type integer): The order (or tier) of the path
  4. industry (type string): A concatenation of the upstream endpoint sector's name and its corresponding region, e.g. 'BBB_Sector 3'.
  5. value (type float): The value of the path in the monteary units provided in the Infosheet.csv
  6. footprint (type float): The footprint of the path for the chosen indicator, in the units provided in the Infosheet.csv
  7. value_pct (type float): The value coverage of the path in percent relative to the target sector's \( x \)
  8. footprint_pct (type float): The footprint coverage of the path in percent relative to the target sector's \( m \)

Saving the results

Saving the results to a CSV text file is as easy as pressing the button, which in turn opens an operating-system dependent file save dialog, and the user is asked to choose a location and a enter a name; spaJS provides the default name 'spajs.csv'. We recommend adding information about the scanning parameters to the file name in a prescribed order, e.g. 'spajs_<maxorder>_<indicator>_<threshold>.csv', since such information is not included in the file (this shortcoming will be addressed in future versions of the tool).

The file content consists of the path list in CSV format following the same structure as provided by the sample table (Screenshot 3.3). The paths are ranked in decreasing order of footprint. Note that the path ID does not reflect in anyway their ranking!

N.B.: All the entries with a tier value of 0 are identical in every aspect with exception of the value in the 'path' column. This quirk is a remnant of previous (unreleased) versions of the tool, and it may dissapear in the future.

Visualisation

Tree structure

Once a CSV structure has been created, in addition to save the results to disk it is possible to visualise these directly in the browser.

spaJS provides an interactive visualisation using a dynamic tree hierarchy where the sectors along the retrieved paths are represented by nodes and their transactions by links. In this hierachy, the target sector ('item' in the above sense) sits at the root node (to the left of the tree), while upstream suppliers ('industries' in the above sense) are located along 'branches' of the tree (extending to the right of the root node).

A node sitting on tier \(\tau \) is said to be 'parent' to a linked node sitting on tier \(\tau + 1\). Conversely, a node sitting on tier \(\tau + 1\) is said to be a 'child' of a linked node sitting on tier \(\tau \).

When displaying the tree hierarchy, nodes along paths which are identical in every aspect except for their ID are 'zipped' together to avoid redundancy at each tier. For instance, even though all entries in the CSV structure identified by an unique ID share the same root node, the latter is displayed only once. Thus a set of \( k \) linked nodes (where \( k = 1, 2, ... \) ) represents \( k \) different paths of order 0, ..., \( k - 1 \).

Note that although the paths are ranked in order of decreasing footprint in the CSV structure (and consequently in the downloadable CSV file), that may not always be the case in the tree visualisation as a result of the 'zipping' of common paths (see above). In other words, the top-bottom structure of the tree branches does not need reflect the paths' ranking. For ease of identification, the top-ranked path is explicitly highlighted, and each path's rank is displayed upon hovering (see below).

Visualising the results is to a CSV text file is achieved by pressing the button. This action opens a new DOM area below the CSV Sample table, displaying the tree hierarchy and preceeded by an information panel.

Visualising a CSV structure
Screenshot 3.4. Tree hierarchy (nodes and branches) and information panel (highlighted by the red rectangle). The top-ranked path (node) is highlighted in red as well, and in this example it coincides with the root node (to the left of the tree).

The information panel (Screenshot 3.4, highlighted in red) presents a summary of the CSV structure data (i.e. of the visualised data); it displays the following:

The tree (Screenshot 3.4, bottom) is displayed with the root node on the far left, and all the paths (nodes) extending to the right. Initially, only paths extending to tier 1 (i.e. of order 1) are displayed. The tree itself provides a wealth of information:

Visualising a CSV structure
Screenshot 3.5. Hovering over a node highlights its downstream path in orange, and also displays a tooltip (highlighted by the red rectangle) which provides some information about the path. See also Screenshot 3.7.

Note that the viewport's height is dynamically adjusted as required in response to displaying an increasing number of paths at higher tiers (i.e. by clicking on 'full' nodes). This is relevant because it allows to display a large number of paths even if they do not fit into the screen.

Visualising a CSV structure
Screenshot 3.6. Clicking on a 'full' node dynamically displays its linked paths one tier upstream (here highlighted by the red rectangle). The viewport's height is adjusted as required.
Visualising a CSV structure
Screenshot 3.7. Hovering over a node of an order 2 path. See also Screenshot 3.5.

NEW

World map

In addition to the rather abstract tree visualisation, spaJS alows to visualise the commercial links between the consumer country and its suppliers (all tiers, all sectors) geographically. The default visualisation is based on a D3 interactive, pseudo-3D globe. In order to access the 3D globe, simply press the located just below (and to the left of) the information panel of the tree visualisation (Screenshot 3.9; this button was not available in previous spaJS versions and is therefore absent in comparable screenshots). Note that in the following we will use a supply chain example based on the default input data (rather than on a dummy data set as before). The scanning parameters in this example are indicated in Screenshot 3.8

Scanning parameters
Screenshot 3.8. The scanning parameters used to illustrate the use of the World map visualisation. This example makes use of the default input data.
Visualisation on a World map
Screenshot 3.9. The button (highlighted within a red rectangle) allows to access the 3D globe visualisation. This button was not available in previous spaJS versions and is therefore absent in comparable screenshots (e.g. Screenshot 3.4).

The 3D globe projection is initially centred on the consumer country, highlighted in green colour. Each of the links to its suppliers (all tiers, all sectors) is indicated as an arched, orange line ending on the corresponding supplier country. Hvering over any country indicates its name and ISO-3166 3-letter code. Hovering over any link reveals the supplier and cosunmer countries joint by an arrow, and the value of the total footprint of the economic activity between these countries over all tiers and all sectors. Note that the link between the consumer country with itself is indicated by a vertical line. The 3D globe representation in addition offers a summary view of the consumer country's supply chain, in the form of an information panel located to the top-right corner (Screenshot 3.10). The information there is equivalent to the information given in the top panel above the tree structure (Screenshot 3.4). Crucially, the Globe can be rotated in any desired direction by click-and-drag to reveal the full extent of the links.

Visualisation on a World map
Screenshot 3.10. The commercial links (orange arches) between the consumer country (in this example, Australia, highlighted in green) and its suppliers across all tiers and sectors. The link between the consumer country with itself is indicated by a vertical line. Hoevering over a link reveals the supplier and cosunmer countries joint by an arrow, and the value of the total footprint (yellow tooltip), in this case between China and Australia. Note that the Globe has been slightly rotated by hand to enhance visualisation.

Alternatively, the globe can be projected onto a 2D (Natural Earth) map. This is achieved by pressing the located at the top-left corner of the Globe projection (Screenshot 3.10, highlighted within a red rectangle). All the features of the 3D globe are also avaible in the 2D projection (with exception of the rotation feature). Also, when projected onto 2D, the map is conventionally centred on the mid Atlantic ocean. Furthermore, the 2D representation shows at a glance the entire set of links between the consumer country and its suppliers (Screenshot 3.11). This representation is useful to generete a graph that can be used in, e.g., a report. For this reason, the projection adopts a different colour scheme compared to the Globe projection. Note that the option to save (or print) the map projection shall be implemented in future versions of spaJS.

Visualisation on a World map
Screenshot 3.11. An map projection which is fully equivalent to the Globe representation; see Screenshot 3.10.

Input File Structure

The required structure of each CSV input file is detailed in the following. See also the notes on file sizes.

A_matrix.csv

This file holds the entries of the \( A \) matrix arranged in columns and rows. The first row contains the indices of the columns, starting from 1. Thus, if \( A \) is of size \( N \times N \), the file must contain \( N + 1 \) rows. Note that this file shares an identical structure to the homonymous file required by pyspa.

The following is a downloadable example: A_matrix.csv.

Infosheet.csv

This file contains four columns with the following headers: SectorID, Name, Unit, Region.

The entries under 'SectorID' must match the column headers of A_matrix.csv. 'Name' corresponds to the sector's name. 'Unit' refers to the monetary unit of the economy considered, e.g. AUD. Note that multipliers, e.g. millions, thousands, should be specified by providing the appropriate prefix: MAUD, kAUD, etc., respectively. 'Region' denotes a country or region, preferably identified by its ISO-3166 alpha-3 code, e.g. AUS for Australia. If such a code is not available, a short name should be provided, e.g. 'Congo' rather than 'Democratic Republic of Congo', or 'RoW' rather than 'Rest of the World'. The first four columns of this file are identical to the homonymous file required by pyspa.

The following is a downloadable example: Infosheet.csv.

Intensitites.csv

This files contains at least three columns with the following headers: SectorID, DR_aaa_(bbb), TR_aaa_(bbb)

The entries under 'SectorID' must match the column headers of A_matrix.csv. 'DR' correspond ot the direct impacts (or requirements) \( q \), while 'TR' corresponds to the total impacts (or requirements) \( m \) of a given indicator (flow). 'aaa' gives the indicator name, e.g. "GHG_emissions", and 'bbb' specifies the unit, e.g. kgCO2e. Note that, strictly speaking, the units should be, e.g. kgCO2e/AUD, but this is implicitly acknowledged. This file may hold one or more indicators, as long as they are provided next to each other following the structure indicated above, i.e.:

SectorID, DR_aaa_(bbb), TR_aaa_(bbb), DR_ccc_(ddd), TR_ccc_(ddd) [, ... ]

Note that each DR_*** column must be followed by its corresponding TR_***. It is worth noting that the columns in this file follow the same structure as columns 5+ in the Infosheet.csv file file required by pyspa.

The following is a downloadable example: Intensities.csv.

Input.csv

This file contains thre columns with the following headers: SectorID, Stressor_Y, X_Out

The entries under 'SectorID's must match the column headers of A_matrix.csv. 'Stressor_Y' correspond to the total final demand (or stressor) \( y \) for each sector in the units specified by 'Unit' in the Infosheet.csv file. 'X_Out' corresponds to the total output (or input) \( x \) in the units specified by 'Unit' in Infosheet.csv.

The following is a downloadable example: Input.csv.

Notes on file sizes

spaJS has been succesfully tested with a number of sectors of up to \(N = 5000 \), or equivalently a total file size of up to 300 MB. In such cases, loading the required data takes on the order of 10-20 seconds depending on the browser and the available internet connection. Although it may be possible to handle larger files, this is yet to be tested. Note that file sizes can be significantly reduced by expressing their numerical content using scientific notation and reducing the number of significant figures, e.g. 1.23e-5 rather than 0.0000123024. Obviously, this does not apply to integer numbers, such as the sector ID or the headers of A_matrix.csv. Needless to say, reduced file sizes may allow to handle a larger \( N \) more efficiently.

Performance

spaJS has been put to the test using pyspa as benchmark. Using pyspa's template input data (version 06 MAY 2019), we have timed several SPA calculations with both pyspa and spaJS on a Mac Book Pro 2020 (macOS Catalina). spaJS has been tested in three different browsers: Chrome, Firefox, and Safari. While the results obtained with either code perfectly agree with one another for each given set of scanning parameters, there are significant differences in terms of speed. These are summarised in Table 1. Note that speed-up values larger than 1 imply a faster calculation, i.e. a better performance.

Browser Speed-up
Chrome 7x
Firefox 1.5x
Safari 0.5x
Table 1. Average speed of spaJS relative to pyspa in various browsers.

Requirements

Bugs

The following is a list of known bugs to be adressed in future versions of the tool.


Contact

Send feedback, comments, suggestions, bug reports, ...


Acknowledgements

spaJS has been developed as part of the Open Analysis to Address Slavery in Supply Chains (OAASIS) project led by Joy Murray, generously funded by the Physics Foundation at The University of Sydney through a Physics Grand Challenge grant. We acknowledge the use of the Eora database in the early stages of spaJS’s development.

The GLORIA25 dataset has been put together by Jacob Fry and Arunima Malik, using resources from the Industrial Ecology Virtual Laboratory (IELab).

The development of spaJS would not have been possible without the wealth of technical support provided by, among others: the Stack Overflow forum; the official documentation of HTML, CSS, and JavaScript provided by the Mozilla Developer Network (MDN) and W3 Schools; the existence of freely available JS libraries, in particular Mike Bostock's D3 and Jos de Jong's mathjs; and free powerful editors such as Atom.

Special thanks to André Stephan and Rob Crawford for the development of and their assistance with pyspa, a code that inspired spaJS.

Please acknowledge the use of this software by referring to Tepper-García et al. (2021).

Built with ...

spaJS has been written in modern JavaScript (ECMAScript 2019). It takes advantage of the power of mathjs and D3. It has been developed and tested with the Atom editor and its atom-live-server package.


Definitions

For the sake of clarity, we adopt the following definitions and conventions.

disclaimer

spaJS is free software that is provided as is, and comes without any warranty of any kind.


license

The use of this software is governed by a creative commons attribution non-commercial license. Note in particular that this license prohibits the use of this software for any commercial purposes.

Please acknowledge the use of this software by referring to Tepper-García et al. (2021).