Skip to content
master
Go to file
Code

Latest commit

Dominik Jaeckle Dominik Jaeckle
Dominik Jaeckle and Dominik Jaeckle readme
0aed8de

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

bg img

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: example

About

JS 2D colormap to color encode scatterplots

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.