VGA DBLP Demo

This project uses a modified version of Tippecanoe and demo_dblp-app to create a visualization using priorities to control which features are included at a given level. It is currently only modified to work with 3 conferences.

Getting Started

Prerequisites

• NodeJS with version >= 22.
• [sqlite3] (https://www.npmjs.com/package/sqlite3)
• [zlib] (https://www.npmjs.com/package/zlib)

sudo apt-get install sqlite3 libsqlite3-dev
sudo apt install zlib1g-dev

Tippecanoe

The modified version of tippecanoe made for this project must be installed. To do so, navigate to the ./tippecanoe directory and run the following commands:

sudo make -j
sudo make install

Alternatively, navigate to ./demo_dblp-app and run:

sudo ./automake.sh

Configurations

• The ./demo_dblp-app/config/ directory contains a set of configuration file that is used in the dashboard generation process.
• To configure the list of interested conferences, check and modify to conferences.json. Note that each conference is defined as a two-element array, containing a label and a regex match string.
• To configure the list of interested publication types, check and modify to publication-types.json.
• To configure the list of interested year range, check and modify to year-range.json.
• To configure the list of interested combinations of conferences that you would like to have a unique colour, modify conference-combos.json.
• To configure the list of colors for the interested conferences, check and modify to colors.json. Note that it should follow the same order defined in interested conferences. Also note the following ordering:

Conference 1

Conference 2

Conference 3

Both 1 and 2

Both 1 and 3

Both 2 and 3

All 1, 2, and 3

Process Data and Generate the Dashboard

Navigate to ./demo_dblp-app. The rest of the README will assume ./demo_dblp-app is the root directory of the project.

The ./script/ directory contains a set of scripts that is used for data processing and dashboard generation. In this directory, scripts are labelled with indices.

Before we run the first script, we need to make sure a DBLP XML dump file with a name of dblp.xml is put into the ./data/ directory. If the directory does not exist, we should create it. The dump file can be download from here. Note that, the downloaded file could be zipped and we need to unzip it in that case.

Also, we need to install the dependencies for the scripts by running the following command in root directory of the project (where the package.json is located).

npm install

Now, we can run these scripts in the order of their indices. Each subsequent script should be run after the previous one is done.

NOTE: 0_generate-sqlite-db.js basically extracting information from the XML file into a SQLite database to make the data querying in later processing easier. However, it can be pretty time-consuming comparing to the later steps. If frequently changing the configuration of conferences and year ranges is the case, it might be good to run this step with a larger filter with all conferences and year range that might be interested later (but do not run it without filtering since it could take days). Then, when configuration is changed (as a subset of the larger filter), we start from step 1 instead of 0.

For example, we first run the below command.

node script/0_generate-sqlite-db.js

When it is done, then we can proceed to the next step by run the following command.

node script/1_generate-nodes-and-edges.js

Script 5

When script/5_generate-vector-tiles.js is to be run, note that there are additional command line parameters that can be used. Using no command line parameters, ie. running

node script/5_generate-vector-tiles.js

will create a graph where all nodes are kept at all levels. Any tippecanoe options, detailed at Tippecanoe, can be used here, however the options that are the focus of this project are --cluster-distance, --leave-lines, and --aggregate-cluster. Running the following command will create a graph where the nodes have a minimum required space of 20 units between them, and lines connecting to a node that has to be dropped due to this rule are also dropped. This number can be set anywhere from 1-255.

node script/5_generate-vector-tiles.js --cluster-distance=20

The other two options are used in addition to --cluster-distance. The following command will make a graph where all of the edges are visible at all zoom levels, but the nodes are still dropped the same as if --leave-lines was not present.

node script/5_generate-vector-tiles.js --cluster-distance=20 --leave-lines

--aggregate-cluster makes it so a node B that is too close to node A of higher priority is aggregated into A, and all lines ending at B will instead go to A. This option takes precedence over --leave-lines, so using both will mean that only --aggregate-lines has any effect. The following command is an example of how to use this option:

node script/5_generate-vector-tiles.js --cluster-distance=20 --aggregate-cluster

After the last script is executed, the ./dist/ directory should be there and it should contains all the assets for the generated dashboard.

Serve the Dashboard

• For quick testing, we can run the following command in root directory of the project.

  npm run serve

  And then go to VGA App, click the button to load config with URL of http://localhost:8080/app.vgaconf.json. Then the dashboard should be loaded.

• For production, we can copy the ./dist/ directory to an actual static file server (that should be HTTPS and CORS enabled). Then, instead of using URL of http://localhost:8080/app.vgaconf.json, we use the URL of the file in the production server.