jingxuanlim / color2d

JS 2D colormap to color encode scatterplots

Color2D - 2D Colormaps Javascript Plugin

This plugin allows you to encode two-dimensional information with color based on a 2D colormap. Examples include scatterplots of multivariate projections or the visual representation of Self-Organizing Maps.

A demo is available here.

This plugin is based on the work of Steiger et al.

Explorative Analysis of 2D Color Maps
Steiger, M., Bernard, J., Mittelstädt, S., Hutter, M., Keim, D., Thum, S., Kohlhammer, J.
Proceedings of WSCG (23), 151-160, Eurographics Assciation, Vaclav Skala - Union Agency, 2015

Usage

Integrate the color2D.js file:

<script src="color2D.js"></script>

Set the Colormap and assign the colors in a callback function:

Color2D.setColormap(Color2D.colormaps.BREMM, function() { 
    var rgb = Color2D.getColor(x, y);
});

The following colormaps are supported:

Color2D.colormaps.BREMM; 
Color2D.colormaps.SCHUMANN; 
Color2D.colormaps.STEIGER; 
Color2D.colormaps.TEULING2; 
Color2D.colormaps.ZIEGLER;

You may also define your own 2D colormap. All you need is a .png file and set its dimensions.

Color2D.colormaps.NEW_COLORMAP = "$path_to_png$.png";
Color2D.dimensions = {width: 512, height: 512};

Per default, Color2D expects your data to be feature scaled within the range [0,1]. However, you can also change the range according to your data:

Color2D.ranges = {x: [0,1], y: [0,1]};

Example

Following, the colormap of Bremm et al. is applied to a random 2D scatterplot. From left to right: (1) 2D colormap, (2) random scatterplot, (3) color encoded scatterplot: