D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
zanarmstrong
Full window
Github gist
perceptual distance for varied colormaps
<!DOCTYPE html> <html> <head> <title>test</title> </head> <style> #title { font-size: 22px; font-family: Kavivanar; font-weight: 500; } text { font-family: Kavivanar; } p { font-family: Alegreya; font-size: 15px; } span { font-weight: 700; } </style> <body> <link href="https://fonts.googleapis.com/css?family=Alegreya|Kavivanar" rel="stylesheet"> <h1 id="title">Perceptual Distances in Color Spaces</h1> <p><span>On the left:</span> Perceptual distances between adjacent colors are shown for 3 versions of the "rainbow" colormap as well as a number of popular sequential or diverging alternative colormaps. Perceptual distance is calculated based on the DeltaE 2000 defined in Zachary Schuessler's <a href="https://zschuessler.github.io/DeltaE/learn/#toc-delta-e-2000">DeltaE node package</a>. The higher the point on the graph, the greater the perceived distance (for people who are not colorblind) between that color and its immediate neighbors.</p> <p><span>On the right:</span> These are normalized versions of each colormap. Each walks through the same set of hues as the original colormap and with the same average perceptual distance between adjacent points, but are normalized to be perceptually uniform.</p> <p><span>The colormaps:</span> "Jet" is the former default color scheme used by MatLab. HSL walks through the full set of hues in the HSL space, with full saturation and 0.5 lightness. The "less angry rainbow" is the <a href="https://github.com/d3/d3-scale#interpolateRainbow">interpolateRainbow</a> defined in D3. The rest of the color schemes can be found in the <a href="https://github.com/d3/d3-scale">D3-scale documentation</a> or <a href="https://github.com/d3/d3-scale-chromatic">D3-scale-chromatic</a>.</p> <p><span>Learn more:</span> A blog post discussing this visualization is in the works.</p> <p><em>By Zan Armstrong and Jonas Sicking</em></p> <svg id="viz"></svg> <script type="text/javascript" src="distbundle.js"></script> </body> </html>