Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Viridis Color Palette Generator

Viridis Color Palette Generator

A simple tool for extracting discrete color palette values from the viridis collection of color palettes.

<!DOCTYPE html>
<html>
<head>
<title>Viridis Palette Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" />
<style>
body {
max-width: 800px;
margin: 0 auto;
}
p {
font-height: 1rem;
line-height: 1.3rem;
}
input {
width: 50px;
}
#preview {
width: 270px;
height: 10px;
margin-top: 10px;
}
#levels {
margin-top: 20px;
}
div.level {
width: 100%;
height: 75px;
display: block;
margin-bottom: 1rem;
}
div.level div {
display: inline-block;
}
div.block {
height: 100%;
width: 75px;
}
</style>
</head>
<body style="font-family: sans-serif;">
<h1>Viridis Color Palette Generator</h1>
<p>
The <a href="http://bids.github.io/colormap/">matplotlib colormaps</a> introduced in 2015 are widely popular, with implementations of the palettes in <a href="https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html">R</a>, <a href="https://github.com/d3/d3-scale#interpolateViridis">D3js</a>, and others. Popular for good reason, the palettes are colorblind-friendly, retain representational clarity in greyscale, and are generally aesthetically pleasing.
</p>
<p>
This tool provides a convenience wrapper around D3js's viridis implementation for use in data visualization tools with manual color value specification (e.g., Microsoft Excel, ArcGIS, and Tableau to name a few). To begin, select the number of categories and the color palette you'd like to use.
</p>
<label for="groups">Categories: </label>
<input type="number" id="groups" value="5" min="2" max="256">
<label for="palette">Palette: </label>
<select name="palette" id="palette">
<option value="v">viridis</option>
<option value="i">inferno</option>
<option value="m">magma</option>
<option value="p">plasma</option>
</select>
<!-- <button id="generate">Generate</button> -->
<div id="preview"></div>
<div id="levels"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select('input').on('change', function() {
generatePalette();
});
d3.select('input').on('keyup', function() {
generatePalette();
});
d3.select('select').on('change', function() {
generatePalette();
});
function generatePalette() {
var n = parseInt(d3.select("#groups").property("value"));
if (n > 256) {
n = 256;
d3.select("#groups").property("value", 256);
}
var p = d3.select("#palette").property("value");
// Interpolation Scale Proxy
var paletteProxy = function(_l) {
switch (p) {
case "v":
return d3.interpolateViridis(_l);
case "i":
return d3.interpolateInferno(_l);
case "m":
return d3.interpolateMagma(_l);
case "p":
return d3.interpolatePlasma(_l);
default:
break;
}
};
// Update the preview
var gradient = "linear-gradient(to right, " +
paletteProxy(1.0) + ", " +
paletteProxy(0.5) + ", " +
paletteProxy(0.0) + "" +
")";
d3.select("#preview").style("background", gradient);
d3.select("#preview").style("background", gradient);
// Update the value-levels
var data = [];
d3.range(0, 1 + 1/(n - 1), 1/(n - 1))
.slice(0, n)
.reverse()
.map(function(l) {
var r, g, b, hex;
hex = paletteProxy(l);
r = parseInt(hex.slice(1, 3), 16);
g = parseInt(hex.slice(3, 5), 16);
b = parseInt(hex.slice(5, 7), 16);
var obj = {
"background": hex,
"rgb": [r, g, b]
};
data.push(obj);
});
d3.select("#levels")
.html("")
.selectAll("div")
.data(data).enter()
.append("div")
.classed("level", true)
.append("div")
.classed("block", true)
.style("background-color", function(d) {return d.background;})
.select(function() {return this.parentNode})
.append("div")
.html(function(d){
var rgb = "rgb(" + d.rgb.join(", ") + ")";
var hex = d.background;
return rgb + "<br><br>" + hex}
)
.style("position", "absolute")
.style("padding-top", "1rem")
.style("padding-left", "1rem");
}
</script>
<script type="text/javascript">
generatePalette();
</script>
</body>
</html>
@jjmcsorley

This comment has been minimized.

Copy link

@jjmcsorley jjmcsorley commented Jul 28, 2019

Thanks for sharing this!

@jacobtfisher

This comment has been minimized.

Copy link

@jacobtfisher jacobtfisher commented Jul 11, 2020

Thanks for sharing! Super useful.

@hauselin

This comment has been minimized.

Copy link

@hauselin hauselin commented Aug 16, 2020

Very useful! Thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment