Tutorial

Prerequisites

1. libpressio
2. npm (for frontend)
3. Python 3 (for backend)

Project setup

git clone https://github.com/YuxiaoLi1234/fzvis.git
cd fzvis

Set up configure

enter your ip address and port in config.json

run `./setup-f.sh` to start vue and to run the frontend code.

run `./setup-b.sh` to setup the python enviroments and to run the backend code.

Dashboard Overview -

The dashboard allows for easy navigation and interaction with compressor configurations, dataset uploads, and metric visualizations.

The dashboard should look like this figure-

Workflow

Running a Compressor:

• Compressor Selection: Choose a compressor from the dropdown list (e.g., SZ, ZFP).
• Error Bound: Enter the error bound value.
• Metric Categories: Select the categories of metrics you want to visualize.
• Configuration: Save and confirm your configurations.

Input Dataset

• Upload the Input Dataset: Upload your dataset file and fill in the dataset dimensions along with the precision value.
• Run the Compressors: Submit the configurations and execute the compression.

Visualization

The result in the visualization module should appear as shown below:

Interaction usage:

Compare Matrics among Compressors.

1. After running all compressors, you need to click on the name of the compressors you want to compare:

2. Click on the compressor_compare button, the result shoule be like the figure below:

(click on the all_compressor button to return to the visualization of barcharts of all of the compressors)

Slice Visualization:

After running the compressors, visualize a slice of your input data.

• Input the slice_id.
• Click the DataVis button to view the data.
• Use the colormap selector to customize your view.
• Add control points (add_points mode) or drag existing control points (use current control points mode).