OpenCV.js-based Scatterplot Renderer and Optimizer

This is a demo of the algorithm described in the paper Fast Design Space Rendering of Scatterplots by Simo Santala, Antti Oulasvirta, and Tino Weinkauf.

Online demo

The source code is licensed under the MIT license.

Installation

Tested with Node.js version 12.18.0.

npm i

Running

npm run start

Source Code

index.html

Template that imports opencv.js. index.js is imported automatically by webpack.

index.js

Main React application that initializes the renderer.

data-import.js

React GUI and functionality to import CSV data.

scatterplots.js

React GUI for displaying and interacting with the scatterplot.

renderer.js

Scatterplot rendering algorithm.

optimizer.js

Scatterplot optimization algorithm. Implements the algorithm of Micallef et al. (2017).

ssim.js

OpenCV implementation of Structural Similarity. This is a refactoring of the SSIM implementation of ssim.js which is a refactoring of the Typescript SSIM implementation by Bezkrovny.

opencv.js

Compiled OpenCV.js library.

config.json

Configuration parameters for the application.

example-data/

Example data sets from Hurricane Isabel data produced by the Weather Research and Forecast (WRF) model, courtesy of NCAR, and the U.S. National Science Foundation (NSF).