Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active June 7, 2024 02:16
Show Gist options
  • Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Download ZIP
Compare Colors
Raw
.block
license: mit
Raw
README.md

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

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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