Skip to content

Instantly share code, notes, and snippets.

@stefanpejcic

stefanpejcic/.block

Forked from curran/.block
Created January 16, 2021 18:22
Show Gist options
  • Save stefanpejcic/18806e57f9a12bfa0328b7a703b315f8 to your computer and use it in GitHub Desktop.
Save stefanpejcic/18806e57f9a12bfa0328b7a703b315f8 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