Skip to content

Instantly share code, notes, and snippets.

@curran
Last active September 30, 2023 09:04
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Compare Colors
license: mit

A design tool for comparing colors.

In data visualizations, sometimes the visual marks appear far apart (e.g. scatter plots), and sometimes they are adjacent (e.g. heatmaps, choropleths). This tool allows you to compare colors while designing a color palette for data visualizations, such that you can see how colors visually compare to one another when they are both far apart and close together.

Intended to complement other tools for color scheme design, including:

Built with blockbuilder.org

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/d3@4.7.4/build/d3.min.js"></script>
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-minicolors@2.1.10/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-minicolors@2.1.10/jquery.minicolors.css">
<style>
body {
margin:0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<input type="text" id="a" class="form-control picker" value="#ff6161">
</div>
<div class="col">
<input type="text" id="b" class="form-control picker" value="#ff0f0f">
</div>
<svg width="960" height="470">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
y;
var rectEnter = svg
.selectAll("rect")
.data(["a", "b"])
.enter();
// Small rectangles at the top.
var rectWidth = 90;
var rectHeight = 90;
y = 50;
rectEnter
.append("rect")
.attr("class", function (d) { return "color-rect-" + d; })
.attr("x", function (d, i){ return i * width/2 + width/4 - rectWidth/2; })
.attr("y", y)
.attr("width", rectWidth)
.attr("height", rectHeight);
// Large rectangles at the bottom.
y = 200;
rectEnter
.append("rect")
.attr("class", function (d) { return "color-rect-" + d; })
.attr("x", function (d, i){ return i * width/2; })
.attr("y", y)
.attr("width", width/2)
.attr("height", height);
// Grayscale filter for comparing luminance.
y = 335;
rectEnter
.append("rect")
.attr("class", function (d) { return "color-rect-" + d; })
.attr("x", function (d, i){ return i * width/2; })
.attr("y", y)
.attr("width", width/2)
.attr("height", height)
.attr("filter", "url(#grayscale)");;
function change (value) {
var id = d3.select(this).attr("id");
d3.selectAll(".color-rect-" + id).attr("fill", value);
}
$(".picker")
.minicolors({
change: change,
theme: "bootstrap"
})
.each(function (d){
change.call(this, d3.select(this).attr("value"));
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment