Skip to content

Instantly share code, notes, and snippets.

@Yardanico

Yardanico/.block

Forked from curran/.block
Created May 17, 2020 20:53
Show Gist options
  • Save Yardanico/e7deead840ca477d0c59b0078c229906 to your computer and use it in GitHub Desktop.
Save Yardanico/e7deead840ca477d0c59b0078c229906 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/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="#FFDF00">
</div>
<div class="col">
<input type="text" id="b" class="form-control picker" value="#f1e05a">
</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