GithubHelp home page GithubHelp logo

js-colormaps's Introduction

js-colormaps

💡Idea: matplotlib colormaps for JavaScript

The idea of this project is simple: make the colormaps of Python's matplotlib library available in JavaScript. I came up with it because I needed a colormap in JavaScript for a side project of mine and Google did not spit out any good results, so I decided to do it myself and make it available to the public.

🎨 What is a colormap?

If you have found this repository I presume you already know what a colormap is, but just for completeness’ sake, a colormap formally is a function f: [0, 1] → [0, 255]³ that maps a number onto a color, represented by a triplet of 8-bit integers (= the red, green, blue values). Or at least that is the convention that I have adopted for this project. Of course, a lot of the time the values you want to colorcode are not between 0 and 1 — in this case, you will have to rescale them first.

🚀 How can I use the colormaps?

Most of the magic is contained in the js-colormaps.js file, which you need to include like:

<script src="js-colormaps.js"></script>

Once you have loaded that file, you have either use the function evaluate_cmap(x, name, reverse) to map a value x onto a color using the colormap specified by name and reverse:

>> evaluate_cmap(0.5, 'viridis', false)
Array(3) [ 33, 144, 140 ]

Alternatively, you can also directly access every colormap by its name (using the _r suffix to reverse it):

>> RdBu_r(0.25)
Array(3) [ 106, 172, 208 ]

🌈 Which colormaps are available?

All of matplotlib’s colormaps are available, under the same name that you would use in Python:

(Feel free to check out the overview.html file to see how this overview figure was created.)

Additionally, it should not be too hard to modify the code in create-colormaps.py to also export other Python-based colormaps to JavaScript, for example, the scientific colour maps by Fabio Crameri.

⚖️ Copyright

I did not invent any of the colormaps here, I do not own them, and I do not claim that I do. I just tried to make them available to others. If I happen to violate any of your copyrights with this project, please inform me before you drag me to court and we can sort this thing out :-)

Regarding my own copyrights: The project is released under the MIT license (see LICENSE file), which pretty much means “Do whatever you want, but don't hold me liable!”.

js-colormaps's People

Contributors

pwambach avatar timothygebhard avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

js-colormaps's Issues

Qualitative (discrete) colormaps are seen as continuous

I know that this is an old project, but I found it useful to display colormaps in my application.

However, qualitative colormaps are different than the matplotlib ones. While they should be continuous, it appears that they are actually linearly interpolated:

JS:
image

Matplotlib:
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.